div内でコンテンツを揃える

152

私はcssスタイルのtext-alignを使用して、コンテンツをHTMLのコンテナー内に配置します。コンテンツがテキストまたはブラウザがIEの場合、これは正常に機能します。しかし、それ以外の場合は機能しません。

また、その名前が示すように、基本的にテキストを揃えるために使用されます。alignプロパティはずっと前に非推奨になっています。

HTMLのコンテンツを揃える他の方法はありますか？

html css text-align

— ヘマンシュボジャク
ソース

詳細を教えてください。他のブラウザでは動作しないコードを過ぎています。

— shoban

マークアップの例を挙げて、あなたが何をしようとしているのか他の人にわかるようにしてください。それ以外の場合は、質問があいまいです。

— levik 2009年

216

text-alignは、テキストと他のインラインコンテンツを揃えます。ブロック要素の子を整列しません。

これを行うには、幅を揃える要素に「自動」の左マージンと右マージンを設定します。これは、IE5.x以外のすべての場所で機能する、標準に準拠した方法です。

<div style="width: 50%; margin: 0 auto;">Hello</div>

これをIE6で機能させるには、適切なDOCTYPEを使用して、標準モードがオンになっていることを確認する必要があります。

IE5 / Quirksモードを本当にサポートする必要がある場合、最近はそうするべきではありませんが、2つの異なるアプローチを組み合わせてセンタリングすることが可能です。

<div style="text-align: center">
    <div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>

（明らかに、スタイルはスタイルシート内に配置するのが最適ですが、インラインバージョンは例示的なものです。）

— ボビンス
ソース

2

よくあるdivの幅がわからない場合、このソリューションはすべてのブラウザーで完全に機能します。matthewjamestaylor.com

— Artem Russakovskii

<div style = "width：100％; margin：0 auto;"> Hello </ div>を使用しました

— Aamol 2017

9

次のようにすることもできます：

HTML

<body>
    <div id="wrapper_1">
        <div id="container_1"></div>
    </div>
</body>

CSS

body { width: 100%; margin: 0; padding: 0; overflow: hidden; }

#wrapper_1 { clear: left; float: left; position: relative; left: 50%; }

#container_1 { display: block; float: left; position: relative; right: 50%; }

以下のようアルテムRussakovskiiはまた述べ、によって元の記事読んMattewジェイムス・テイラー完全な説明のために。

— マディ
ソース

9

<div class="content">Hello</div>

.content {
    margin-top:auto;
    margin-bottom:auto;
    text-align:center;
}

— krithi k
ソース

1

このコードスニペットは問題を解決する可能性がありますが、説明を含めると、投稿の品質を向上させるのに役立ちます。あなたは将来の読者のための質問に答えていることを覚えておいてください、そしてそれらの人々はあなたのコード提案の理由を知らないかもしれません。

— 2016年

申し訳ありませんが、上記のコードはdivコンテンツを親コンテンツに

— 揃え

6

正直なところ、これまでに見たすべての解決策は嫌いです。その理由をお話しします。それらは正しく調整されていないようです...だから、私が通常行うことは次のとおりです。

各divとそれぞれのマージンがどのピクセル値を保持しているかがわかっているので、次のようにします。

絶対位置と左の値が50％のラッパーdivを作成します。このdivが画面の中央から始まり、divの幅のすべてのコンテンツの半分を減算します...そして、私はコンテンツを美しくスケーリングしています...そして、これはすべてのブラウザでうまくいくと思います。自分で試してみてください（この例では、サイトのすべてのコンテンツがこのラッパークラスを使用するdivタグでラップされ、その中のすべてのコンテンツの幅が200pxであると想定しています）。

.wrapper {
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

編集：追加するのを忘れました...幅を設定することもできます：0px; 一部のブラウザでは、このラッパーdivでスクロールバーを表示しないようにし、すべての内部divに絶対配置を使用できます。

これはまた、コンテンツを垂直方向に揃える上でも驚くほど機能し、top：50％とmargin-topを使用します。乾杯！

— アレクサンドル
ソース

2

私が使っているテクニックは次のとおりです。

<div>
    <div style="display: table-cell; width: 100%">&nbsp;</div>
    <div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>

スニペットを展開

— ブラッドハウンド
ソース

2

以下は常に私のために働いてきた方法です

フレックスレイアウトモデルを使用する場合：

親divの表示をに設定するdisplay: flex;と、justify-content: center;（主軸上のアイテムを整列するため）およびalign-items: center;（交差軸上のアイテムを整列するため）を使用して、div内の子要素を整列できます。

複数の子要素があり、それらの配置方法（列/行）を制御する場合は、flex-directionプロパティを追加することもできます。

作業例：

.parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  height: 250px;
  width: 250px;
}

.child {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

スニペットを展開

2.（以前の方法）位置、マージンプロパティ、固定サイズの使用

作業例：

.parent {
  border: 1px solid black;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  border: 1px solid black;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  position: absolute;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

スニペットを展開

— nmak18
ソース

1

すべての答えは、水平方向の配置について話します。

複数のコンテンツ要素を垂直方向に揃えるには、次のアプローチをご覧ください。

<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
    <div>
        <p>Paragraph #1</p>
        <p>Paragraph #2</p>
    </div>
</div>

スニペットを展開

— ニコラ
ソース

-2

HTMLとCSSを使用したもう1つの例：

<div style="width: Auto; margin: 0 auto;">Hello</div>

— ディオゴ
ソース

27

あなたが書いたものはどれもASP.NETに固有のものではありません。それは単なるHTMLとインラインCSSです。プロパティ付きのサーバーコントロールを書き出すつもりでしたか？

— webworm 2012

1

修繕。答えは今正しい技術に言及しています。

— ジョニー