【CSS】横幅が可変な要素を中央寄せにする
margin: 0 auto;
で中央寄せするためには要素の幅を指定しないといけないので、横幅が可変な場合はこの方法では中央寄せにできません。
inline-block
を使えばできるみたいです。
<div class="pager_wrapper"> <ul class="pager"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div>
.pager_wrapper { text-align: center; } .pager { display: inline-block; }
中央寄せにしたい横幅が可変な要素を更にdivタグなどで囲い、外側の要素にtext-align: center;
を指定します。
中央寄せにしたい要素は、display: inline-block;
を指定します。
これで、親要素のtext-align: center;
の影響を受けることになり、中央寄せになります。