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; 

但是，這有副作用每行將佔用65px或您爲line-height屬性硬編碼的任何值。

這裏是一個演示：http://jsfiddle.net/7fdSJ/3/

Answer 3

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

它一劈，但它作品。自定義適合您自己的情況的值10px。