我该如何左对齐中心对齐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;} 

如果你已经改变了他们的显示特性，或做了什么，它覆盖正常的排列规则（如浮动它们），那么这将无法工作。