jquery - 在 jQuery Mobile ListView 中水平居中具有不同大小的图像

Question

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

json 对象有:

• 一张图片
• 标题
• 一个网址

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

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

如何在 JQuery Mobile ListView 中将图像居中放置在这个假想的列中？

谢谢你的帮助， 瑞克。

Answer 1

Here is a 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 类，使容器宽度为 80 像素，内容水平居中，并为图像提供 80 像素的最大宽度和高度:

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