News

センタリング

Bootstrap4でセンタリングする場合は、center-blockではなく、mx-autoを使おう!

2017.10.04

Bootstrap4ではセンタリングの処理が変更になった!

センタリング

Bootstrap4になってから、Bootstrap3.xとは記述方法が異なるものが多くありますね。その一つにブロック要素のセンタリングがあります。Bootstrapを使用している人で、センタリングといえば、これまでは「.center-block」の記述をしている人も多かったかと思います。または「Offset」などで配置を移動していた方もいるかもしれません。



ところがBootstrap4では、レスポンシブ・グリッド修飾子クラス(offset、pull、push)は廃止となり、センタリングも「.center-block」から、「.mx-auto」の記述に変更となりました。



■記述の意味
.ml-auto ブロック要素左側のマージンをautoにする
.mr-auto ブロック要素右側のマージンをautoにする
.mx-auto ブロック要素両側のマージンをautoにする


まとめ

このようにBootstrap4で、ブロック要素をセンタリングする場合は、「.mx-auto」の記述で行う事になりますので、注意したいところですね。