如何将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> 

最下面一行是居中对齐，有没有办法使它左对齐但保持父div的居中对齐？

像这样的东西，但不需要填充。

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

如果您更改了它们的显示属性，或做了一些覆盖常规对齐规则的操作（例如浮动它们），则此操作将无效。