列表视图中的jquery移动缩略图和文本对齐方式

Question

我有一个带有缩略图的listview元素。缩略图以一种特殊的方式对齐，文本似乎有额外的顶部和底部间距。你有什么办法让文字和图片垂直对齐吗？

Answer 1

为了使图像与文本的顶部完全对齐，我所做的是：

<div style="padding:10px 10px 10px 0;text-align:center; float:left;">
   <img src="image.jpg" style="max-width:80px;max-height:80px;"/>
</div>

Answer 2

您可以使用CSS为列表项中的段落标签创建规则，将p元素的line-height设置为特定值：

.ui-page .ui-content .ui-listview p {
    line-height    : 65px;
    vertical-align : middle;
}

这是一个演示：http://jsfiddle.net/7fdSJ/2/

如果您想要允许多行文本，则可以添加以下内容：

white-space    : normal;

但这有一个副作用，即每一行都将占用您为line-height属性硬编码的65px或任何值。

这是一个演示：http://jsfiddle.net/7fdSJ/3/

Answer 3

.ui-page .ui-content .ui-listview p {
    padding-top:10px;
}

这是一种黑客行为，但它是有效的。自定义适合您自己的情况的值10px。