html - 页面上 33.3333% 的中心元素

Question

我的元素向左浮动，宽度为 33.33333% 我正在努力让这些元素在页面上居中，我仍然希望元素内的文本为 text-align: left，但我不知道如何居中页面上的这些项目：

ul.home-product-list {}

.home-product-list li {
  float: left;
  width: 33.33333%;
}

<ul class="home-product-list">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

截屏

我该怎么办？

标签： htmlcss

Answer 1

尝试应用margin: 0 auto;到您想要居中的项目。

ul.home-product-list {
  width: 100%;
}

.home-product-list li {
  width: 33.33333%;
  margin: 0 auto;
}

<ul class="home-product-list">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>