垂直方向のセンタリングテクニック

2010年11月09日

見出しなどに背景画像を指定して表示させる場合、paddingなどで垂直方向の文字の位置を調整してセンタリングをしていませんか？それよりももっと簡単な方法があります。

HTML

`1`	`<h2 class="sampleTxt">これは見出しです。</h2>`

1.sampleTxt{
2    height:30px;
3    line-height:30px;
4    background-image: url(./text_bg.gif);
5    background-repeat: no-repeat;
6}

ポイントとしては、背景画像の高さと、テキストのheight、そしてline-heightを同じ値に設定することです。こうすることで、特にpaddingなどで調整しなくても垂直方向にセンタリングされるとともに、IE6のようにpaddingとwidthの定義が他と異なるブラウザの対策にもなります。

注意点としては、line-heightで行の高さを指定しているため、2行以上に渡るデザインになると表示が崩れてしまいます。確実に1行で完結するデザインのときのみにしか使えません。

ちなみに、vertical-align: middle;でも一見同じことができそうに見えますが、vertical-alighはspanなどのインライン要素や、tableのセル要素にしか効かないため、見出しなどに使用することは難しいと言えます。