jquery mobile thumbnail и выравнивание текста в просмотре списка

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

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

Это взломать, но это работает.Пользовательское значение 10px для вашего собственного случая.

Answer 3

Вы можете использовать CSS для создания правила для тегов абзаца внутри элементов списка, которое устанавливает line-height элемента p на конкретное значение:

.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/