DAINASHI YESTERDAY

2014.08.31

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

20140831-1-1200x800

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

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以下への対応方法も説明されているので興味あったら見てみてください。それでは。

投稿者: