CSSでブロック要素をセンタリングするには？

text-align: center;が大好きな私ですが、ときどき効かないことってありませんか？

恥ずかしながら最近になって要素にはブロック要素とインライン要素があるということを知り、意識し始めました。

同じように苦労されている方へ、また私の忘備録のために記録しておきます。

ブロック要素をセンタリングする方法

text-alignはinline要素に対して有効です。

そのためブロック要素は違う方法でセンタリングに必要となるわけです。具体的にブロック要素をセンタリングするCSSは下記のようになります。

参考：margin: auto;

ポイントは、

• 幅（width）を指定する。
• 両サイドのmarginをautoにすることで、両サイドのmarginをバランスよく取られる。
• ブロック要素である。

かなと思います。

CSSとか基本的なルールしか知らなかったので、こういった使い方あるのか！と知れた瞬間でした。

 

ちなみに要素下部にmarginを設定したい場合はこうなります。

気になる点

autoで余白を制御しますので、ブラウザの仕様に依存したコーディングだと思います。

気になって「margin auto ブラウザ依存」のようなキーワードで調べましたが、とくにトラブっている感じではなさそうでした。

以上、CSSが楽しいと感じたテクニックでした。

 - フロントエンド CSS