JQuery Mobile ListView Thumbnail Alignment

Question

Я использую JQuery Mobile для просмотра списка с миниатюрами.

Как установить выравнивание для миниатюр изображений, используемых в списках просмотра?

Я попытался установить атрибут стиля для изображения с помощью align, vertical-align или даже обернуть изображение тегом <center>, но это не работает.

Я тоже попробовал margin-top, но это не сработало, так как это толкнуло бы все большие пальцы вниз, независимо от их высоты. Я хочу только по вертикали и горизонтали центрировать изображения размером менее 80 x 80 пикселей.

Я бы хотел выровнять изображение по центру по горизонтали и вертикали.

Answer 1

JQuery mobile применяет следующие стили к вашему ui-li-icon:

.ui-li-icon {
     position: absolute;
     left: 1px;
     top: 0;
     max-height: 80px;
     max-width: 80px;
 }

Чтобы не нарушать существующую реализацию, вы можете поместить изображение значка в другой тег, например:

<li>
   <a href="#p1">
         <p class="my_icon_wrapper">
              <img src="images/myicon_image." width="32" height="32"/>
             </p>
        <h3>List item title</h3>
        <p>List item description</p>
   </a>
</li>

my_icon_wrapper может реализовать некоторые из стилей, которые сделал jQuery Mobile, например ::10000

.my_icon_wrapper {
        float: left; 
        width: 80px; height: 80px;
        text-align: center; 
        vertical-align: middle; 
}

Вам нужно немного поиграть со стилями, чтобы получить желаемый эффект.