css - 水平方向に中央揃えにするにはどうすればよいですかの？

Question

私はいくつかを中心にしようとして<li>い<ul>ます。これがマークアップです。

<ul class="thumbnails">
  <li>
    <a href="#" class="thumbnail">
      <img data-src="holder.js/250x200" alt="">
    </a>
  </li>
  <li>
    <a href="#" class="thumbnail">
      <img data-src="holder.js/250x200" alt="">
    </a>
  </li>
  <li>
    <a href="#" class="thumbnail">
      <img data-src="holder.js/250x200" alt="">
    </a>
  </li>
  <li>
    <a href="#" class="thumbnail">
      <img data-src="holder.js/250x200" alt="">
    </a>
  </li>
</ul>

画像のスタイルを設定する CSS が少しあるので、現時点では次のようになります。

<li>を中央にとどめ、スペースを均等に埋めようとしています。何か案は？

ありがとうございました。

Answer 1

の幅ulが可変の場合、次の方法が最善の方法だと思います。

ul.thumbnails  {
    text-align: center;
}

ul.thumbnails li {
    display: inline-block;
}