jquery mobile中的网格位置问题？

Question

我正在使用网格视图，我需要屏幕中心的网格视图，我该怎么做？

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;
    }

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>

从上面的代码我得到网格位置，如下面的屏幕截图所示，

但是我需要网格位置，如下面的屏幕所示

Answer 1

很少有变化是css： Demo

.grid-row {
        width: 302px;
        height: 150px;
        margin-bottom: 1px;
        text-align:center;
    }

.grid-row a {
       position:relative;
        /*float: left;*/
        display: inline-block;
        width: 100px;
        height: 150px;
        margin-right: 1px;
  }

Answer 2

此CSS应该适合您（请参阅演示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;
}

由于您无法垂直居中，因此需要将margin-top调整为适合您的内容。