スポンサードリンク

line-height を使って簡単に縦方向のセンタリングをしよう

センタリング!

HTML と CSS で縦方向のセンタリングをしようとすると、何かと面倒だったりするわけですが、line-height を使うことで簡単にできちゃう場合もあるのでちょっとメモ φ(..)。

やり方は簡単で、ボックス要素の中のインライン要素の line-height に、親のボックス要素の高さをそのまま設定してやるだけです。

ソースはこんな感じ。

おぉ! 簡単。

ただし簡単なだけに条件(というか、制約)があって、ボックス要素の中のインライン要素が1行でないとうまくいきません。ココ、注意です。

インライン要素を2行にしちゃうとどうなるか・・・? については、是非試していただきたいと思います。なかなか笑えます。

スポンサードリンク
コメント
Verify your Comment
Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

コメントを投稿

プロフィール


  • 書いてる人:夢界 陸

    名古屋在住のおっさん。
    プログラミングやガジェットの話など、 日々の興味を徒然と綴っています。



    Twitterやってます @mukairiku



    運営サイト
    www.mukairiku.net

アクセスランキング


ブログ内検索

Licenses

  • Creative Commons License

OTHER

  • このブログのはてなブックマーク数

    ブログパーツ
Blog powered by TypePad

スポンサードリンク