Div不在Div内居中

Question

 .wrapper { width: 100%; height: 150px; } .iconBar div { float: left; font-size: 18px; } div.iconBar { display: table; margin: 0 auto; } .iconBar img { height: 35px; width: 35px; vertical-align: middle; } 

 <div class="wrapper"> <div class="iconBar"> <div> <img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/convenient.png"> Convinient, All-Inclusive Weekly Price </div> <div> <img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/Insurance.png"> Insurance </div> <div> <img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/mileage.png"> Milage Allowance & Expenses </div> <div> <img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/tractorTrailer.png"> Tractor & Expandable Trailer </div> <div> <img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/professionalDriver.png"> Professional Driver </div> </div> </div> 

Why is my div not centering? I am having trouble making the div center. I tried a bunch of solutions from other people and i got it to work in one of the tests, but this one is not working?

Edit: iconBar Div, i want the text and icons to be centered. It needs to look like the bottom picture

Answer 1

Going by your image remove float:left and add display: inline-block; to .iconBar div {...} and add text-align: center; to div.iconBar {...}

 .wrapper { width: 100%; height: 150px; } .iconBar div { display: inline-block; font-size: 18px; } div.iconBar { display: table; text-align: center; margin: 0 auto; } .iconBar img { height: 35px; width: 35px; vertical-align: middle; } 

 <div class="wrapper"> <div class="iconBar"> <div> <img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/convenient.png"> Convinient, All-Inclusive Weekly Price </div> <div> <img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/Insurance.png"> Insurance </div> <div> <img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/mileage.png"> Milage Allowance & Expenses </div> <div> <img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/tractorTrailer.png"> Tractor & Expandable Trailer </div> <div> <img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/professionalDriver.png"> Professional Driver </div> </div> </div>