ブロック要素の中央揃えにはどのプロパティを使用していますか?
margin: 0 auto;やFlexboxでの中央揃えなどいくつかやり方がありますが、構成によっては手間がかかったり、無駄なCSSの打ち消しが発生したりします。
そんな時に1つの手段として使えるmargin-inline: auto;について解説していきます。
margin-inlineプロパティとは
margin-inlineプロパティとは、インライン方向の先頭と末尾のマージンを設定出来るプロパティとなります。
簡単に言うと、テキストが横書きの場合は左右のマージン、テキストが縦書きの場合は上下のマージンを設定出来るプロパティとなります。
また、margin-inlineはmargin-inline-startとmargin-inline-endのショートハンドとなります。
横書きの場合はmargin-inline-startが左・margin-inline-endが右となり、縦書きの場合はmargin-inline-startが上・margin-inline-endが下となります。
margin-inlienの使い所
一部の要素だけ左右中央に配置したいけど、Flexboxにする為に要素をdivタグで囲むのも面倒、margin: 0 auto;だと上下のマージンの打ち消しが発生してしまうし、margin-left: auto;とmargin-right: auto;を書くのも手間だ、という場合にはとても便利なプロパティです。
要は、場面によって使い分ける事が重要です。
こういう選択肢はいくつかあると、余計な手間が増えず作業スピードのアップにも繋がります。
margin-inlineプロパティの使用例
次に実際の使用例を見ていきます。
今回はテキストが横書きのブロック要素の左右中央配置となります。
<div class="box">BOX</div>.box {
text-align: center;
width: 150px;
padding: 15px;
margin-inline: auto;
background-color: #EFEFEF;
}対応ブラウザもIEや古いブラウザ以外は問題ありません。
詳しくはCSS property: margin-inline | Can I useをご覧ください。
さいごに
いかがでしたでしょうか。
今回は、インライン方向の先頭と末尾のマージンを設定出来るmargin-inlineプロパティを解説しました。
中央揃えにする手段はいくつかあるので、場面によって使い分けるようにしていけるといいですね。
