Single Post
Flexboxでテキストをボックス中央配置
| Web
ボックス要素の中にテキストを中央で配置したい時ってありますよね。これまでは「vertical-align: middle;」を使っていたのですが、友人が他にも良い方法があると教えてくれたので、備忘録兼ねて記事にさせて頂いきます。
HTML
<div class="contents-center"> <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p> </div>
CSS
.contents-center {
display: flex;
align-items: center;
justify-content: center;
}
簡単な説明になりますが【align-items: center;】は、縦軸に対して中央に配置します。【justify-content: center;】は、横軸に対して中央配置されます。align-itemsプロパティに関する詳細な説明はこちら、justify-contentプロパティに関する詳細な説明はこちらを参照ください。とても分かり易く説明がされています。
【align-items】が効かない場合は、displayがflexになっているかどうかを確認しましょう。【align-items】は、flexboxで指定する必要があります。
まとめ
最新のFirefoxやIE11でも実装してみましたが、問題なく表示できました。Firefoxに関しては、古いバージョンに対応するため、ベンダープレフィックスを付けておいた方が良いかもしれません。
もう一つ、この技術はブロック要素にも応用可能です。詳細は、こちらに丁寧に掲載されておりますので、ご確認ください。
