如何在jqm中居中图像？ （使用马赛克插件）

Question

我是 JQuery 移动版的新手。我正在为当地一家餐馆制作移动网络。我想在菜单中的每张图片上加上标题，幸运的是我偶然发现了 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 上尝试了 align-center 但没有运气。 有什么想法吗？

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