html - Center images in a div with equal horizontal and vertical spacing -


i have div containing 10 images, each own div:

<div id="tankdialog" title="choose tank" style="display:none">       <div class="imagebox"><img src="images/tanks/tank1.png" style="width:150px" /></div>       <div class="imagebox"><img src="images/tanks/tank2.png" style="width:150px" /></div>       <div class="imagebox"><img src="images/tanks/tank3.png" style="width:150px" /></div>       <div class="imagebox"><img src="images/tanks/tank4.png" style="width:150px" /></div>       <div class="imagebox"><img src="images/tanks/tank5.png" style="width:150px" /></div>       <div class="imagebox"><img src="images/tanks/tank6.png" style="width:150px" /></div>       <div class="imagebox"><img src="images/tanks/tank7.png" style="width:150px" /></div>       <div class="imagebox"><img src="images/tanks/tank8.png" style="width:150px" /></div>       <div class="imagebox"><img src="images/tanks/tank9.png" style="width:150px" /></div>       <div class="imagebox"><img src="images/tanks/tank10.png" style="width:150px" /></div> </div> 

these images not uniform in size forcing them 150px. want lay out images in grid-like fashion they're each inside invisible box takes same amount of horizontal , vertical space. , want each image centered inside invisible box. divs around images aid positioning/placement--if they're not necessary achieve layout, that's fine. problem each image gets positioned @ top left of div, rather in center. here imagebox class:

.imagebox{     float:left;     width:177px;     height:177px;     display:block;     margin: 0 auto; } 

notice in screenshot below how image aligns in top-left rather center. how can fix this?

enter image description here

add text-align , line-height imagebox class:

.imagebox {     float:left;     width:177px;     height:177px;     display:block;     margin: 0 auto;     text-align: center;     line-height: 177px; } 

add vertical-align images:

.imagebox > img {     vertical-align: middle; } 

jsfiddle: http://jsfiddle.net/ghorg12110/e71f0txq/


Comments

Popular posts from this blog

android - Gradle sync Error:Configuration with name 'default' not found -

java - Andrioid studio start fail: Fatal error initializing 'null' -

html - jQuery UI Sortable - Remove placeholder after item is dropped -