javascript - Issue with grid position in jquery mobile? -
i using grid view , need grid view @ center of screen, how can that?
css:
.grid-container { margin-left: auto; margin-right: auto; width: 302px; height: 452px; } .grid-row { width: 302px; height: 150px; margin-bottom: 1px; } .grid-row_last-child { margin-bottom: 0px; } .grid-row { position:relative; float: left; display: block; width: 100px; height: 150px; margin-right: 1px; } .grid-row a:last-child { margin-right: 0px; }
html:
<div class="grid-container"> <div class="grid-row"> <a href="index.htm"> <img alt="alt..." src="http://th01.deviantart.net/fs12/150/i/2006/287/3/4/puppy_pug_3_by_weitat.jpg" /> </a> </div> <div class="grid-row"> <a href="index.htm"> <img alt="alt..." src="http://th01.deviantart.net/fs12/150/i/2006/287/3/4/puppy_pug_3_by_weitat.jpg" /> </a> </div> </div>
from above code getting grid position shown in below screen shot,
but need grid position shown in below screen
this css should work (see demo http://jsfiddle.net/2map4/1/):
.grid-container { margin-top: 100px; margin-left: auto; margin-right: auto; } .grid-row img{ margin-left: auto; margin-right: auto; display: block; }
since can't center vertically need adjust margin-top
works you.
Comments
Post a Comment