如何將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;}

如果您更改了它們的顯示屬性，或做了一些覆蓋常規對齊規則的操作（例如浮動它們），則此操作將無效。