如何在div中对齐ul与中心对齐？

Question

我的无序列表对齐有问题。我希望保持对齐我的无序列表，但仍然保持父母div的居中对齐。

.images img {
  width: 290px;
}

.images ul {
  padding: 0px;
  margin: 0px;
}

.images li {
  list-style: none;
  display: inline-block;
  padding: 13px;
}

.images {
  padding: 40px 0;
  text-align: center;
}

.images span {
  text-decoration: line-through;
  opacity: 0.5;
}

<div class="images">
  <div class="container">
    <ul>
      <li>
        <div class="fake-you-white-cap">
          <a href="/product_page?id=35"><img src="/includes/pictures/fake-you-white-cap.jpg" alt="Fake You White Cap">
            <div class="overlay2">
              <h6>Fake You White Cap</h6>
              <p>Rp 130.000</p>
            </div>
          </a>
        </div>
      </li>
      <li>
        <div class="play-hard">
          <a href="/product_page?id=34"><img src="/includes/pictures/play-hard.jpg" alt="Play Hard Snapback">
            <div class="overlay2">
              <h6>Play Hard Snapback</h6>
              <p>Rp 130.000</p>
            </div>
          </a>
        </div>
      </li>
      <li>
        <div class="doge-white">
          <a href="/product_page?id=33"><img src="/includes/pictures/doge-white.jpg" alt="Doge White Cap">
            <div class="overlay2">
              <h6>Doge White Cap</h6>
              <p>Rp 130.000</p>
            </div>
          </a>
        </div>
      </li>
      <li>
        <div class="fake-you-navy-cap">
          <a href="/product_page?id=36"><img src="/includes/pictures/fake-you-navy-cap.jpg" alt="Fake You Navy Cap">
            <div class="overlay2">
              <h6>Fake You Navy Cap</h6>
              <p>Out of Stock</p>
            </div>
          </a>
        </div>
      </li>
      <li>
        <div class="doge-black">
          <a href="/product_page?id=32"><img src="/includes/pictures/doge-black.jpg" alt="Doge Black Cap">
            <div class="overlay2">
              <h6>Doge Black Cap</h6>
              <p>Out of Stock</p>
            </div>
          </a>
        </div>
      </li>
      <li>
        <div class="weirdo-pink">
          <a href="/product_page?id=14"><img src="/includes/pictures/weirdo-pink.jpg" alt="Weirdo Pink Cap">
            <div class="overlay2">
              <h6>Weirdo Pink Cap</h6>
              <p>Out of Stock</p>
            </div>
          </a>
        </div>
      </li>
      <li>
        <div class="weirdo-black">
          <a href="/product_page?id=13"><img src="/includes/pictures/weirdo-black.jpg" alt="Weirdo Black Cap">
            <div class="overlay2">
              <h6>Weirdo Black Cap</h6>
              <p>Out of Stock</p>
            </div>
          </a>
        </div>
      </li>
    </ul>
  </div>
</div>

The bottom row is centered align, is there a way to make it left align but maintain the align center from the parents div?

Something like this but without the need of padding.

Answer 1

这是你想要的吗？只需将css属性text-align:left;添加到#images li{}

即可

https://jsfiddle.net/Lgxazx8p/

Answer 2

你的意思是这样吗？

.images img {
  width: 290px;
}

.images ul {
  padding: 0px;
  margin: 0px;
}

.images li {
  list-style: none;
  display: inline-block;
  padding: 13px;
  text-align: left;
}

.images {
  padding: 40px 0;
  text-align: center;
}

.images span {
  text-decoration: line-through;
  opacity: 0.5;
}

<div class="images">
  <div class="container">
    <ul>
      <li>
        <div class="fake-you-white-cap">
          <a href="/product_page?id=35"><img src="/includes/pictures/fake-you-white-cap.jpg" alt="Fake You White Cap">
            <div class="overlay2">
              <h6>Fake You White Cap</h6>
              <p>Rp 130.000</p>
            </div>
          </a>
        </div>
      </li>
      <li>
        <div class="play-hard">
          <a href="/product_page?id=34"><img src="/includes/pictures/play-hard.jpg" alt="Play Hard Snapback">
            <div class="overlay2">
              <h6>Play Hard Snapback</h6>
              <p>Rp 130.000</p>
            </div>
          </a>
        </div>
      </li>
      <li>
        <div class="doge-white">
          <a href="/product_page?id=33"><img src="/includes/pictures/doge-white.jpg" alt="Doge White Cap">
            <div class="overlay2">
              <h6>Doge White Cap</h6>
              <p>Rp 130.000</p>
            </div>
          </a>
        </div>
      </li>
      <li>
        <div class="fake-you-navy-cap">
          <a href="/product_page?id=36"><img src="/includes/pictures/fake-you-navy-cap.jpg" alt="Fake You Navy Cap">
            <div class="overlay2">
              <h6>Fake You Navy Cap</h6>
              <p>Out of Stock</p>
            </div>
          </a>
        </div>
      </li>
      <li>
        <div class="doge-black">
          <a href="/product_page?id=32"><img src="/includes/pictures/doge-black.jpg" alt="Doge Black Cap">
            <div class="overlay2">
              <h6>Doge Black Cap</h6>
              <p>Out of Stock</p>
            </div>
          </a>
        </div>
      </li>
      <li>
        <div class="weirdo-pink">
          <a href="/product_page?id=14"><img src="/includes/pictures/weirdo-pink.jpg" alt="Weirdo Pink Cap">
            <div class="overlay2">
              <h6>Weirdo Pink Cap</h6>
              <p>Out of Stock</p>
            </div>
          </a>
        </div>
      </li>
      <li>
        <div class="weirdo-black">
          <a href="/product_page?id=13"><img src="/includes/pictures/weirdo-black.jpg" alt="Weirdo Black Cap">
            <div class="overlay2">
              <h6>Weirdo Black Cap</h6>
              <p>Out of Stock</p>
            </div>
          </a>
        </div>
      </li>
    </ul>
  </div>
</div>

Answer 3

ul {
width: 70%;
margin: auto;}

如果你已经改变了它们的显示属性，或者做了一些覆盖正常对齐规则的事情（例如浮动它们），那么这将不起作用。