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