JQuery Mobile Listview Thumbnail Alignment

Question

I am using JQuery Mobile listview to create a list of items with thumbnails.

How do I set the alignment for thumbnail images used in Listviews?

I tried setting the style attribute for the image using align, vertical-align or even wrapping the image with a <center> tag but it doesn't work.

I tried margin-top as well but that doesn't work as it would push all thumbs down regardless of its height. I only want to vertically & horizontally centered images that are less than 80 x 80 pixels.

I would like to horizontally and vertically align the image to the center.

Answer 1

JQuery mobile applies the following styles to your ui-li-icon:

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

To not break the existing implementation, you could wrap you icon image in another tag, for example:

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

The my_icon_wrapper can them implement some of the styles jQuery Mobile did, e.g.:

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

You'd need to play with the styles a bit to obtain the desired effect.