さよならとりっぷ

しがないWebエンジニアの雑記とポエム

h1タグ内でvertical-alignを使用せずにテキストを中央・縦揃えにする

くそドツボにはまったのでメモ

<header>
 <h1>タイトル</h1>
</header>
h1 {
 margin:0 0 15px 0;
 padding:0 auto;
 color:#fff;
 font-size:2em;

//中央揃え
 text-align:center;

//縦揃え
 height:60px;
 line-height:60px;
}

cssの下二行が重要。
h1のheightの数値とline-heightの数値を一緒にすることで縦に揃う。

広告を非表示にする