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

Get zoom value from google maps encoded string

google-maps zoom polygon geospatial

I have a page which displays different polygons saved as strings in SQL Db. I managed to center the map depending on the polygon being loaded, but I would also like to set the zoom level of the map,

ANTLR 3 parsing problem

java antlr antlr3

I have written an ANTLR 3 grammar for parsing TaskJuggler III bookings files (see below).

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.