Grid view at center of page in jquery mobile

I am new to JqueryMobile. I have a screen containing a 3*3 grid of images. I need to align them at the center of the page as well as there shouldn't be any space between them except 1px. Each cell should fit an image without stretching. All images are having width of 100px and height of 150px. Please help me.

<div class="ui-grid-b">
<div class="ui-block-a">
  <div class="ui-bar">
    <a href="xxx.htm">
      <img alt="alt..." src="bigmiracle.png" />
    </a>
  </div>
</div>
<div class="ui-block-b">
  <div class="ui-bar">
    <a href="xxx.htm">
       <img alt="alt..." src="bigmiracle.png" />
    </a>
  </div>
</div>
<div class="ui-block-c">
  <div class="ui-bar">
     <a href="xxx.htm">
        <img alt="alt..." src="bigmiracle.png" />
     </a>
  </div>
</div>
<div class="ui-block-a">
  <div class="ui-bar">
     <a href="xxx.htm">
        <img alt="alt..." src="bigmiracle.png" />
     </a>
  </div>
</div>
<div class="ui-block-b">
   <div class="ui-bar">
      <a href="xxx.htm">
         <img alt="alt..." src="bigmiracle.png" />
      </a>
   </div>
</div>
<div class="ui-block-c">
   <div class="ui-bar">
      <a href="xxx.htm">
         <img alt="alt..." src="bigmiracle.png" />
      </a>
   </div>
</div>    

Here is the Screen shot.

Answers


First of all, this can't be done with jQuery Mobile grid. That grid was made to be responsive and stretch. It is much better solution to create our own grid that will contain needed images.

I only don't understand was your intention to use:

<div class="ui-bar"> 

or was it a mistake to include it. I have done this example without it. There's no need if you want grid to fully wrap an image.

Here's a working example: http://jsfiddle.net/Gajotres/VUWAA/

HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>

            <div data-role="content">
                <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>
                        <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>
                        <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>
                        <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>
                        <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>
                        <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>
                        <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>
            </div>
        </div>    
    </body>
</html>   

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 a {
    position:relative;
    float: left;
    display: block;
    width: 100px;
    height: 150px;
    margin-right: 1px;
}
.grid-row a:last-child {
    margin-right: 0px;
}

Need Your Help

Map Multiple Controls to one Method

ms-access access-vba ms-access-2010

I know in the .Net framework you can map any controls events to a singular method, as if you wanted to map a column of buttons in a GridView to one method, you could.