jquery mobile中的网格位置问题？答案

【问题标题】：Issue with grid position in jquery mobile?jquery mobile中的网格位置问题？
【发布时间】：2014-06-27 05:46:18
【问题描述】：

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

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>

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

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

【问题讨论】：

标签： javascript jquery css jquery-ui jquery-mobile

【解决方案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 调整为适合您的设置。

【讨论】：

【解决方案2】：

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

【讨论】：