如何在jqm中居图像？ （使用Mosaic插件）

Question

我是JQuery mobile的新手。我正在为当地餐馆制作移动网络。我想在菜单中的每个图像上加上标题，幸运的是我偶然发现了Mosaic JQuery插件并且能够使用它。把标题设置成功，现在的问题是图像不能与Android手机浏览器对齐。

上图显示图像未对齐到中心，左边有边距（蓝色），右边有边距（红色）。

到目前为止，这是我的代码：

（HTML）

<div data-role="main" class="ui-content" align="center" >
  <div class="hh">
   <h2><br>Delicious Meals to taste!</h2>
  </div>
    <div class="mosaic-block bar2">
        <a style="left: 0px; bottom: -50px;" href="maindish.html" target="_blank" class="mosaic-overlay">
            <div class="details">
                <h4>Delicious Main Dishes inside</h4><br>
                <h6>UCLM Restaurant (photo credit: Dan Deroches)</h6>
            </div>
        </a>
        <a href="maindish.html">
        <div style="display: block;" class="mosaic-backdrop"><img src="images/maindish/Rosemary-Chicken-Kabob.jpg"></div>
        </a>
    </div>

    <div class="mosaic-block bar2">
        <a style="display: inline; left: 0px; bottom: -50px;" href="maindish.html" target="_blank" class="mosaic-overlay">
            <div class="details">
                <h4>Delicious Main Dishes inside</h4><br>
                <p>UCLM Restaurant (photo credit: Dan Deroches)</p>
            </div>
        </a>
        <a href="maindish.html">
        <div style="display: block;" class="mosaic-backdrop"><img src="images/maindish/Rosemary-Chicken-Kabob.jpg"></div>
        </a>
    </div>

</div><!--content-->

（CSS）

.mosaic-block {

float:left;
position:relative;
left:50%;
overflow:hidden;

width:400px;

height:250px;

margin:0px;

background:#111 url(../img/progress.gif) no-repeat center center;

border:1px solid #fff;

-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
}

我尝试在每个div上对齐中心，但没有运气。 有什么想法吗？

Answer 1

jQM在ui-content div上有15px的填充。首先将其设置为零：

.ui-content{
    margin: 0;
    padding: 0;
}

从内容div中删除align =“center”，然后将标题对齐如下：

.hh {
    text-align: center;
}

最后使用马赛克块上的自动边距将它们居中：

.mosaic-block {
    position:relative;
    overflow:hidden;
    width:400px;
    height:250px;
    margin:10px auto;
    background:#111;
    border:1px solid #fff;
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
}

  

这是 DEMO