【css】横幅が可変な要素を中央配置にする

widthを固定せずに中央配置

問題

要素を中央配置にするのはmargin:0 auto;と昔から相場が決まっているのですが、

これは横幅が固定されていないと効きませんでした。

ちょうどページネーションのような、プログラムで自動生成したような横幅が固定出来ない要素を中央配置にしたい、なんて時は上記のやり方では出来ませんでした。

解決策

中央配置にしたい要素にdisplay: inline-block;

親要素にtext-align: center;

を指定する事で解決します。

html

<div class="parent">
  <ul class="child">
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
</div>

こんな感じのhtmlで、liをfloatで横並びにしてたりするじゃないですか？

で、childを幅を指定しないで中央配置にしたい時

css

親要素にtext-align :center;

該当要素にdisplay :inline-block;

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

単純に該当要素がinline-blockになったことで親要素のtext-alignを継承するようになるという解決策です。