如何横向居中<li>＆＃39; </li>

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;
}