div内のコンテンツを整列させる

StackOverflow https://stackoverflow.com/questions/684634

  •  22-08-2019
  •  | 
  •  

質問

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

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

HTML内のコンテンツを整列させる他の方法はありますか?

役に立ちましたか？

解決

テキスト整列は、テキストおよび他のインラインコンテンツを整列させます。これは、ブロック要素の子を揃えません。

これを行うには、あなたが左に「自動」と右の余白に、幅を揃えたい要素を与えたいです。これはIE5.x以外どこでも動作する標準規格に準拠した方法です。

<div style="width: 50%; margin: 0 auto;">Hello</div>
これはIE6で動作するためには、

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

あなたが本当にこれらの日、あなたが本当に、心に2つの異なるアプローチ組み合わせることも可能であるべきではないIE5 /癖モード、サポートする必要がある場合：

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

（もちろん、スタイルは最高のスタイルシートの内側に置かれているが、インラインバージョンは例示である。）

他のヒント

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

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

として アルテム・ルサコフスキー についても言及されていますので、元の記事をお読みください マシュー・ジェームス・テイラー 完全な説明については。

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

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

正直なところ、私は私がこれまで見てきたすべてのソリューションを嫌い、なぜ私はあなたを教えてあげる：彼らはちょうど今までに右のそれを合わせていないようだ...ので、ここで私は通常、何をすべきかです。

私は何ピクセル値それぞれのdivを知っていて、それぞれの余白が保持する...ので、私は、次の操作を行います。

私は絶対位置と、50％の左の値を持つラッパーのdivを作成します...ので、これが今のdivは画面の中央に始まり、その後、私はdiv要素の幅のすべてのコンテンツの半分を引きます...と私BEAUTIFULLYスケーリングコンテンツを取得...と私は、これはあまりにも、すべてのブラウザ間でうまくいくと思います。 （この例では、サイト上のすべてのコンテンツは、このラッパークラスを使用し、その中のすべてのコンテンツの幅が200pxのあるdivタグに包まれていると仮定し）自分自身でそれを試してみてください。

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

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

これはまた、垂直トップ使って同様にあなたのコンテンツを揃えるための素晴らしい作品：50％とマージントップを。乾杯！

ここでうまく働いている私が使用する技術です。

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

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

複数のコンテンツ要素を垂直方向に配置するには、次のアプローチを参照してください。

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

HTMLとCSSを使用してちょうど別の例：

<div style="width: Auto; margin: 0 auto;">Hello</div>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top