要素を上下中央にする方法を紹介します｡
以前は左右中央よりとても難易度が高いものでしたが､多くのブラウザが「display: flex;」に対応したことにより､簡単に実装できるようになりました｡
日本語のテキストの場合はフォント自体が上寄りになっているので注意が必要です｡
- 目次
上下中央の注意点
HTMLで表示される日本語フォントは基本的に上寄りになっています｡
これはもともと英語の小文字の下にはみ出す文字 (「g」,「y」等) が日本語にはないためです｡(中学生の英語のノートにある4本線の一番下の部分です｡)
特に「メイリオ」を「Internet Explorer」はこの傾向が強いです｡
文章ではそれほど気になることは少ないですが､ボタン等上下が囲まれたデザインの場合は､cssで設定上中央にしても上寄りになって見えるので注意が必要です｡
- テキストをマウスで選択するとフォントの下に余白があるのがわかります｡
-
button{
line-height: 2;
}
//IEのみに適用されるフォント調整を書く
//実際の表示を見ながら調整してください｡
@media all and (-ms-high-contrast: none){
button{
padding: 0.25em 0 0;
}
}
line-height
一番簡単に上下中央にできます｡
css設定上は上下中央になっているのですが､ブラウザ､フォントによっては上下中央に見えないことがあります｡
ただし､これはテキストが1行だと決まっているときだけで､当然ですが､複数行になったときには上下中央になりません｡
vertical-align: middle;
「text-align: center;」は手軽に左右中央にできるもので､その対として簡単に上下中央にできると思いがちですが､ほとんどの場合で使えません｡
使えるのはほぼtable-cellのときだけです｡
こういうこともあって以前はHTMLコーディングでtableレイアウトが使われていたのだと思います｡
display: flex; align-items: center;
「display: flex;」の上下中央には「align-items: center;」を使います｡
position: absolute; margin: auto;
親要素に「position: relative;」を指定し､子要素が全部「position: absolute;」だと高さがなくなってしまうので高さを指定しないといけません｡
左右中央限定であれば「top: 0;」「bottom: 0;」も必要です｡左右も追加すれば上下左右中央になります｡
