CSSでコンテンツを内包する要素を可変横幅にし中央配置する

内包するブロック要素をコンテンツのサイズに合わせた横幅にし、さらに中央配置したい場合は、内包するブロック要素にwidth:auto,display:block,margin:autoを指定する。

<div class="foo">
<a href="http://example.com">
<span class="bar">
inline-block<br>
centering
</span>
</a>
</div>
.foo {
min-width: 500px;
margin: 10px;
padding: 10px;
background-color: #000;
}
a {
display: block;
padding: 10px;
text-align: center;
background-color: #900;
color: #fff;
}
.bar {
display: inline-block;
padding: 10px;
width: auto;
margin: 0 auto;
background-color: #009;
}

サンプル
https://codepen.io/anon/pen/JXjxVL

参考
http://stackoverflow.com/questions/18524722/center-an-auto-width-div

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA