.box_block { margin: 0px; padding: 0px; overflow: hidden; text-align: center; } .box_block li { list-style: none; float: left; border: 1px solid #cccccc; } .box_div { width: 1150px; } 
 <div class="wa box_div"> <ul class="box_block"> <li> <img src="/images/box_1.png" /> </li> <li> <img src="/images/box_2.png" /> </li> <li> <img src="/images/box_3.png" /> </li> </ul> </div>

But not centered. What to do?

  • It is not clear from the question - do you need to align the ul with the center .box_div or li inside the ul ? - Alexey Ukolov

1 answer 1

<li> is a block element . From the fact that you tell it to wrap (float), it will not lowercase, which means that text-align will not act on it.
It will work with such styles as you expect:

 .box_block { margin: 0px; padding: 0px; overflow: hidden; text-align: center; } .box_block li { list-style: none; display: inline; border: 1px solid #cccccc; } .box_div { width: 1150px; background: #c0ffee; } 
 <div class="wa box_div"> <ul class="box_block"> <li><img src="http://placekitten.com/200/200" /></li> <li><img src="http://placekitten.com/200/200" /></li> <li><img src="http://placekitten.com/200/200" /></li> </ul> </div>