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>'s 留在中心并且仍然均匀地填充空间。有任何想法吗？

谢谢你。

Answer 1

如果宽度ul是可变的，我认为最好的方法如下：

ul.thumbnails  {
    text-align: center;
}

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