はじめに
こんにちは。
皆さんはブロック要素を中央揃いにする時、CSSプロパティは何を使用していますか？
私は、marginプロパティで左右の余白にautoを指定することで中央揃いにしています。
最近、margin以外でも中央揃いにできるプロパティを発見したので、備忘録として残しておこうと思います。
margin-inlineプロパティ
margin以外で中央揃いにする方法として、margin-inlineプロパティを使用する方法があります。
ではmargin-inlineプロパティとは何か、MDNの解説を参考に説明します。
margin-inline は CSS の一括指定プロパティで、論理的なインライン方向の先頭と末尾のマージンを設定します。これは要素の書字方向やテキストの向きに応じて物理的なマージンに変換されます。
引用：MDN
簡単に説明すると、margin-inlineはインライン方向(水平方向)の余白を設定することができます。但し解説にある通り、テキストの向きによって余白の位置が変わります。例えばテキストの向きが縦書きの場合、垂直方向の余白が設定されます。
論理プロパティをご存知ない方は、以下の記事で詳しく解説しているので参考にしてみてください。
margin-inlineプロパティで中央揃い
それでは実際にmargin-inlineを使って中央揃いをやってみます。
値の指定方法は以下の通りとなります。
margin-inline プロパティは、 1 つまたは 2 つの値を使用して指定します。
1 つの値が指定された場合は、先頭と末尾の両方に同じマージンを適用します。
2 つの値が指定された場合は、 1 つ目のマージンが先頭に、 2 つ目のマージンが末尾に指定されます。
引用：MDN
以下のコードでは、div 要素にmargin-inline:autoを使用することで、左右に均等な余白が設定されます。
これにより要素は中央揃いになります。
See the Pen margin-inline/中央揃い by 丸山悠希 (@iwdulmiq-the-builder) on CodePen.
※ "Result"ボタンを押すとプレビューが表示されます。テキストの向きが垂直方向の場合
MDNにもサンプルが掲載されていいますが、テキストが垂直方向の時にどのような動きをするか実際にやってみました。
テキストの向きを垂直方向に設定し、margin-inline: 100px 0を指定すると、要素の上に100pxの余白ができました。このように、テキストの向きによって余白の位置が変わることが分かりました。
See the Pen margin-inline/垂直方向 by 丸山悠希 (@iwdulmiq-the-builder) on CodePen.
※ "Result"ボタンを押すとプレビューが表示されます。最後に
本記事では、margin-inlineプロパティを使用した要素の中央揃いを紹介しました。
結局どのプロパティを使うのがベストなの？と思う方もいると思います。筆者としては、左右の余白のみ指定する時はmargin-inlineプロパティ、上下左右の余白を設定する時はmarginプロパティを使うようにしています。このほうが個人的にコードが読みやすいと思ったからです。もちろん自由に記述していただいて構いませんが、一つのアイディアとして参考にしていただければ幸いです。
長々とありがとうございました。