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;
}

这是一个演示：< a href="http://jsfiddle.net/7fdSJ/2/" rel="nofollow">http://jsfiddle.net/7fdSJ/2/

如果您想允许多行文本，那么您可以添加这个：

white-space    : normal;

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

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

Answer 3

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

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