概要
CSSプロパティのtext-align:center;とinline-blockを利用してコンテンツを横並びセンター寄せにする方法を紹介。用途・要件
- 要素をセンター寄せに整列。
- 子要素の幅は任意に設定できる。
display: inline-block;を指定した際に生じる隙間を消す。
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
- IE11
実装方法
HTML
<div class="c-block">
<div class="c-block__elem">CONTENT1</div>
<div class="c-block__elem">CONTENT2</div>
<div class="c-block__elem">CONTENT3</div>
</div>
SCSS
.c-block {
text-align: center;
font-size: 0;
&__elem {
display: inline-block;
box-sizing: border-box;
width: 30%;
height: 10vw;
border: 1px solid #223a70;
color: #223a70;
font-size: 1rem; //任意のフォントサイズ
&:not(:first-of-type) {
margin-left: 5%;
}
}
}
- inline-blockを指定した親要素に
font-size: 0;を設定する事で子要素に生じた隙間を消す。 - 子要素内のテキストが消えてしまうため、子要素に任意の
font-sizeを指定する。 - marginで子要素の間隔を調整する。
CSS
.c-block {
text-align: center;
font-size: 0;
}
.c-block__elem {
display: inline-block;
box-sizing: border-box;
width: 30%;
height: 10vw;
border: 1px solid #223a70;
color: #223a70;
font-size: 1rem;
}
.c-block__elem:not(:first-of-type) {
margin-left: 5%;
}
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
