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

Post a Comment

Popular posts from this blog

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

-
i don't know happened android studio，when start ，it shows me error message below. , try uninstall/reinstall it,but doesn't work.who can me!!! internal error. please report https://code.google.com/p/android/issues java.lang.runtimeexception: com.intellij.ide.plugins.pluginmanager$startupabortedexception: fatal error initializing 'null' @ com.intellij.idea.ideaapplication.run(ideaapplication.java:178) @ com.intellij.idea.mainimpl$1$1$1.run(mainimpl.java:52) @ java.awt.event.invocationevent.dispatch(invocationevent.java:209) @ java.awt.eventqueue.dispatcheventimpl(eventqueue.java:715) @ java.awt.eventqueue.access$400(eventqueue.java:82) @ java.awt.eventqueue$2.run(eventqueue.java:676) @ java.awt.eventqueue$2.run(eventqueue.java:674) @ java.security.accesscontroller.doprivileged(native method) @ java.security.accesscontrolcontext$1.dointersectionprivilege(accesscontrolcontext.java:86) @ java.awt.eventqueue.dispatchevent(eventqu
Read more

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

-
i want add external library guillotinemenu-android in application. followed steps given in upvoted answer existing question how add library project android studio? facing error when try build project after step 6 i.e. when added dependency in app/build.gradle compile project(":guillotinemenu") . tried stackoverflow links related error not working out. have made folder named libs in app directory , copied project folder guillotine menu there. here build.gradle(module:app) file apply plugin: 'com.android.application' android { compilesdkversion 22 buildtoolsversion "22.0.1" defaultconfig { applicationid "com.sunshine.bbreaker.appet_i" minsdkversion 14 targetsdkversion 22 versioncode 1 versionname "1.0" } buildtypes { release { minifyenabled false proguardfiles getdefaultproguardfile('proguard-android.txt'), 'proguard-rules.p
Read more

StringGrid issue in Delphi XE8 firemonkey mobile app -

-
i'm using delphi xe8 developing mobile application , i'm facing of problem in tstringgrid. i have written following code in stringgridselectcell event. showmessage(stringgrid.cells[0, arow]); and shows proper value of selected row @ first time. when have tried click again selected row, event not getting fired. , cant able unselect particular row. so, have tried write message in onclick event. var irowind: integer; begin irowind := stringgrid1.selected; showmessage(stringgrid.cells[0, irowind]); end; and not working @ first time of click , when clicked second time works properly. issue in android mobile , not in windows. later, have kept both event code , faced issue. when i'm scrolling grid, firing onclick event. so, displaying selected row value. please provide me solution. , in advance. let's onclick event: procedure tfmmain.stringgrid1click(sender: tobject); begin caption := 'selected row id: ' + stringgrid1.select
Read more