web-dev-qa-db-ja.com

div内の内容を揃える

私はCSSスタイルのtext-alignを使ってHTMLのコンテナ内のコンテンツを揃えます。コンテンツがテキストの場合、またはブラウザがIEの場合、これは問題なく機能します。それ以外の場合は動作しません。

また名前が示すように、それは基本的にテキストを整列させるために使われます。 alignプロパティはずっと前から非推奨になりました。

HTMLの内容を揃える他の方法はありますか？

htmlcsstext-align
140
Hemanshu Bhojak

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

それには、左右の余白を「自動」にして、幅を揃えたい要素に幅を設定します。これは、IE5.xを除くすべての場所で機能する標準準拠の方法です。

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

これがIE6で機能するには、適切なDOCTYPEを使用して Standards Mode がオンになっていることを確認する必要があります。

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

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

（明らかに、スタイルはスタイルシートの中に置くのが最善ですが、インラインバージョンは例示です。）

205
bobince

あなたもこれのようにそれをすることができます：

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%; }

Artem Russakovskiiも述べているように、完全な説明は Mattew James Taylor によるオリジナルの記事を読んでください。

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

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

正直言って、私はこれまでに見たすべての解決策を嫌います、そして、私はあなたに理由をお話しします：彼らはちょうど今までそれを正しくそろえていないようです...だからここに私が通常することです：

各divとそれぞれの余白がどのようなピクセル値を保持するかを知っているので、次のようにします。

絶対位置とleft値が50％のラッパーdivを作成します。したがって、このdivは画面の中央から開始し、divの幅の内容全体の半分を減算します。そして、私はコンテンツを美しくスケーリングすることができます...そしてこれはすべてのブラウザでもうまくいくと思います。自分で試してみてください（この例では、サイトのすべてのコンテンツがこのラッパークラスを使用するdivタグで囲まれており、そのすべてのコンテンツの幅は200ピクセルです）。

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

編集：私は追加するのを忘れていました...あなたもwidth：0pxを設定したいと思うかもしれません。一部のブラウザではスクロールバーが表示されないようにするために、このラッパーdivを使用すると、すべての内側のdivに対して絶対位置指定を使用できます。

これはまた、top：50％とmargin-topを使用して、コンテンツを垂直方向に整列させるのにも素晴らしい結果をもたらします。乾杯！

6
Alexandru

これが私が使っているテクニックです。

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

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

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

<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>
1
Nicolas