可変幅のブロック要素をdisplay: inline-blockで中央寄せする方法

2014.08.31 2018.02.13HTML/CSS
可変幅のブロック要素をdisplay: inline-blockで中央寄せする方法

ブロック要素を中央寄せする場合、その要素の幅とマージンを指定します。

HTML

<div class="parent">
<div class="child">このブロック要素を中央寄せ</div>
</div>

CSS


.parent {
width: 100%;
}
.child {
width: 300px;
margin: 0 auto;
}

しかしこの方法は、あらかじめ幅を指定しておくことが難しい場合には使えません。ということで、今回は可変幅のブロック要素を中央寄せする方法をご紹介します。

HTML

<div class="parent">
<div class="child">このブロック要素を中央寄せ</div>
</div>

CSS

.parent {
text-align: center;
}
.child {
display: inline-block;
}

クラス名「child」のブロック要素にインライン要素の性質を持たせ、その親となるブロック要素「parent」にインライン要素を中央寄せするための「text-align: center;」を指定します。

こちらの記事を参考にさせて頂きました。現在では必要があるか分かりませんが、リンク先ではIE7以下への対応方法も説明されているので興味あったら見てみてください。それでは。


<追記>

display:flexを使うことで、より簡単に同様のことができます。下記のページで方法をご紹介していますので、よかったら見てみてください。

→ display:flexを使って可変幅のブロック要素を中央寄せする方法


柴田竹思

柴田竹思

ベトナム在住Web系フリーランス。有名企業から個人事業まで、いろんなウェブサイトを制作してます。これまで400弱くらい作りました。一年中WordPressばっかりいじってます。

プロフィールはこちら