More than 5 years have passed since last update.

CSS縦方向に中央揃えメモ

Last updated at 2019-06-02Posted at 2019-06-01

#CSSテキストを縦方向に中央揃えメモ

縦方向に中央揃えにしようとしたのですが、サイトで調べた方法を試してもなかなかうまくいかなかった。原因はdisplayプロパティへの理解不足でした。こちらサイトでdisplayプロパティについて詳しく解説されていたので参考にしました。

####適用したいhtml

<header class="header">
    <div class="header_inner">
         <h1 class="header_title">title</h1>
         //////////
    </div>
</header>

####失敗したCSS

.header_inner {
    vertical-align: middle
}

text-align, vertical-alignはインライン要素にのみ適用可能とのこと。h1タグはブロック要素なので上記コードを適用しても変更されない。