css - 可変幅の p 要素を中央に配置する

Question

可変幅の p 要素を div の中央に配置するにはどうすればよいですか?

を使用して、固定幅のブロック要素を簡単に中央に配置できmargin: 0px auto;ます。しかし、この p 要素の幅をその子を正確に含むように設定するにはどうすればblockよいでしょうか。

HTML

<div>
 <p>Center me</p>
</div>

CSS

div {
  width: 300px;
}

p {
  margin: 0px auto;
}

Answer 1

使用するtext-align:center

フィドル

p {
    text-align:center;
}