要素を天地中央に配置

2014/9/18 CSS, HTML

2014年4月にXPのサポートが終了したことにより、思う存分使えるようになったdisplayプロパティ。このサンプルもその恩恵にあずかっております。

画像やテキストなどが横並びに並んだ時に、display:table-cell を使って各要素を天地中央に並べて配置する方法です。

HTML

<div>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<p><img src="/sample_html/images/dummy.gif" alt=""></p>
</div>

<div>
<p><img src="/sample_html/images/dummy.gif" alt=""></p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>

CSS

div {
  display: table;
  margin: 1em 0;
}
div p {
  display: table-cell;
  padding: 0.5em;
  vertical-align: middle;
}

表示サンプル

サンプルhtml

天地中央揃えのサンプル

簡単ですね。