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?
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
Post a Comment