CSSで幅や行数が一定でないテキストを上下左右中央に配置する方法

- by konitter

横浜にある株式会社シーブレインというWEB制作会社の制作スタッフが運営するブログ「バシャログ。」の「cssで縦方向中央に配置する方法(5つのケース)」というエントリーの応用編として、そこにもう1つケースを足してみます。

テキストの幅や行数が決まらないけど、常にボックス内で上下左右中央に配置したいというケースです。まあ、そんな場面あんまないと思うけど。

HTML

<div class="sample">
    <p>行数が決まらない場合は<br />
    こうなります。</p>
</div>

CSS

.sample {
    display: table-cell;
    width: 400px;
    height: 150px;
    vertical-align: middle;
    text-align: center;
}
.sample p {
    display: inline-block;
    text-align: left;
}

Sample

行数が決まらない場合は
こうなります。

テキストが4行になっても、

行数が決まらない場合は
こうなります。
4行になっても、100人乗っても
だいじょうぶです。

p要素を囲っているボックスを display:table-cell で表のセル要素にしてやると、vertical-align:middle が有効になるので、中のp要素が縦方向の中央に配置されます。

さらに .sample で、text-align:center を指定し、p要素で display:inline-block と text-align:left を指定してやると、テキストが左右中央に配置されます。

中のテキストの1行分がボックスの幅を超えてしまうと、p要素がボックスの幅いっぱいに広がって左右中央のようには見えないので、p要素に max-width でいくつかの値を指定しておくとよいと思います。

ちなみにIE6/7では、display:table-cell が無視されますので、意図する通りにはなりません。
その場合については、ここでは割愛します。挑戦したい方はどうぞ。

みなさんはこういう場合、どうコーディングしますか?