低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

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

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

HTML

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

CSS

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のセル要素にしか効かないため、見出しなどに使用することは難しいと言えます。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ