hail2u.net

Centering Vertically

Posted at 2005-04-06T08:10:00+09:00 in Web Design

高さの決まったボックスの中で縦方向の真ん中に内容物を配置するという、タイトル・ロゴなどで良くある配置をCSSで実現するとなると、結構戸惑うこともあるんじゃないかと思います。実はこれの実現は単純で、そのボックスの高さと同じだけline-heightを確保してやれば良いだけです。

つまり、ボックスの高さが120pxなら、そのボックスにline-height: 120px;と指定してやるということになります。

div#container {
  height: 120px;
  line-height: 120px;
}

コードで語る(カコイイ)とこんな感じ。

この挙動はCSS2の仕様のline-heightの項にも、

User agents center glyphs vertically in an inline box, adding half-leading on the top and bottom.

と明記されています。

ただ、クライアント側の文字の大きさの変更に追随して、常に縦方向の真ん中に配置されるという挙動にはならないので、ボックスに別途overflow: hidden;を指定してやり、内容物がボックスからはみ出して、続くボックスと重なってしまうというようなことにならないように注意する必要はあります。

てか、通常はボックスの高さを決めずに、ボックスのpaddingや内容物のmarginまたはpaddingを均等に割り振ってやって、縦方向の真ん中に配置というのが最も素直なアプローチじゃないかと思います(これならクライアント側の文字の大きさの変更に追随します)。が、どうしてもヘッダの高さを固定したいという場合には、line-heightを利用すれば縦方向の位置を決定することが出来るという知識はなかなかに役に立つんじゃないかなーとか思ったりしないこともないです。

まだまだ続くCSSネタ(未定)。