html - 子divの幅が固定されているページに中央を揃える方法

Question

私は次のhtmlとして持っています...

<div>
    <h1>centered text</h1>
    <p>some text</p>
</div>

そしてcss....

div{display: table; text-align: center; width: 100%;}
p{width: 100px;}

上記のコードでは、h1 は中央に配置されていますが、p は中央に配置されていません。margin-left: 50% を外側の div に、 left: -50% を内側の div に使用してみましたが、余分な水平スクロール バーが表示されます。そこで、別の方法を使用したいと思います。

Answer 1

p要素のスタイルを更新します:

p{width: 100px; margin: 0 auto}

デモはこちら

説明：

要素は要素からプロパティを継承し、その幅は要素の幅に等しいため、あなたのテキストh1は中央に配置されます。h1text-aligndivdiv

要素pは中央のテキスト配置も継承しますが、長さはわずか 100 ピクセルで、デフォルトの位置プロパティがあるため、要素全体 pが親の左側に固定されますdiv。要素全体を の中央に配置pするには、要素の左右のマージンを設定する必要があります。pdiv

Answer 2

p{width:100px;margin:0 auto;} これにより、上下のマージンが 0 に設定されますが、左から右の中央に配置されます。

CodePen へのリンクはこちら

Answer 3

使用する

 margin-left:auto;  
 margin-right:auto;

---

p  
{
 width: 100px;  
 margin-left:auto;  
 margin-right:auto;
}