CSS:line-heightで縦の中央揃えができる [学習記録]
ふとInternet Explorer7でCuro.jp見てみたら、タイトル文字が切れてしまっていた。
CSSのpaddingとmarginで縦の中央に寄せていたのですが、どうやらそれがまずかったようです。
paddingとmarginをやめて、line-heightで指定することで解決しました。
header {
height: 200px;
}
h1 {
line-height: 200px;
}
これで、headerボックスの縦の真ん中に文字列を寄せることができます。
横の中央揃えはtext-align: center;で簡単にできるけど、line-heightで縦の中央寄せもできるってのがポイントですね。
