javascript - jQuery Mobile 中的网格位置问题？

Question

我正在使用 GridView ，我需要屏幕中央的 GridView ，我该怎么做？

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 应该适合您(参见演示 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 调整为适合您的值。