css - 親要素のみを使用してHTMLを水平方向に中央揃えする方法は?

Question

親ラッパー要素のみを使用して一部の HTML を中央に配置する方法はありますか? 親ラッパー要素は の を参照できませwidthんinnerHTML。私ができる唯一の方法は<center>タグを使用することですが、私たちが知って<center>いるように時代遅れです。たとえば、centerこれに：

<div style="width:100px;height:100px;background-color:#ff0000;"></div>

これ：

<div style="width:800px;height:100px;background-color:#ff0000;"></div>

これ：

<p>a little text here</p>

またはこれ：

<p style="width:400px;">a lot of text here fjskdfj sldjf slkdfj skldjf ksdjf kdsfj ksdjf skdfj ksdjf ksdjf ksdjf ksdjf ksdjf skdjf ksdjf skdfj skdfj ksdjf skdjf ksdjf ksdfj skdfj skdfj skdfj</p>

私は単にそれらをラップすることができ<center>、それは機能します。しかし、それを行う他の方法はありますか？

Answer 1

cssでセンタリング

html code:

<div class="parent">
  <div class="center">
      <p>A lot of text here</p>
  </div>
</div>

CSS コード:

.parent {
   width:800px;
}

.parent .center {
    width:400px;
    margin: 0 auto;
}

<div>with クラスがcenter中央に配置されます。

Answer 2

要素を追加text-align: centerしますparent。

Answer 3

親text-alignのプロパティを次のように定義します。text-align: center;