如何将div中的ul与中心对齐左对齐？

Question

I have problems with the alignment of my unordered list. I wish to left align my unordered list but still maintain the centered alignment of the parents 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

Is this, what you want? Just add css property text-align:left; to your #images li{}

https://jsfiddle.net/Lgxazx8p/

Answer 2

You mean like this?

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

If you've changed their display property, or done something that overrides normal alignment rules (such as floating them) then this won't work.