在jQuery Mobile列表视图中以不同大小水平居中图像

Question

我正在开发一个非常简单的应用程序，它将json对象加载到jquery移动列表视图中。

json对象有：

• 图片
• 标题
• 一个网址

问题是图像没有固定宽度也没有固定比例。所以我可以得到一些比其他更高的图像。 我希望所有图像都集中在屏幕的左侧，但我不知道它是怎么做的。

附上一条红线的截图，显示图像的“中心”。正如您所看到的，第三张图片较小，并且不像其他图像那样居中。

如何在JQuery Mobile列表视图中将这些想象列中的图像居中？

感谢您的帮助，     瑞克。

Answer 1

  

这是 DEMO FIDDLE

我重新组织了列表，将拇指放在DIV中。 LI给出了ui-li-has-thumb的jQM类，而新的DIV得到了ui-li-thumb。这些是通常在找到图像时自动应用的。

<ul data-role="listview" data-theme="a">
  <li class="ui-li-has-thumb"><a href="#">
    <div class="ui-li-thumb">
    <img src="http://..." class="imgThumb"  />
    </div>
    <h2>Broken Bells</h2>
    <p>Broken Bells</p></a>
  </li>
  ...
</ul>

然后我添加CSS类使容器80px宽，其内容水平居中，并给出图像最大宽度和高度80px：

div .ui-li-thumb {
  width: 80px;
  text-align: center;
}
.imgThumb {
  max-width: 80px;
  max-height: 80px;  
}

Answer 2

根据文件（http://jquerymobile.com/demos/1.3.0-rc.1/docs/demos/widgets/listviews/）：

“要在列表项目的左侧添加缩略图，只需在列表项目中添加图像作为第一个子元素。框架会将图像缩放到 80像素的正方形 < /强>“。