CODEWITHSUNDEEP
jqueryhtmlcsslayoutjquery-mobile
David
David

Reputation: 4767

jquery mobile thumbnail and text alignment in listview

I have a listview element which has thumbnails. The thumbnails are aligned in a special way and text seems to get extra top and bottom spacing. Any ideas how to get the text to align vertically with the image?

Upvotes: 1

Views: 8821

Answers (3)

Chaudhry Junaid
Chaudhry Junaid

Reputation: 412

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

Its a hack, but it works. Custom fit the value 10px for your own case.

Upvotes: 0

David
David

Reputation: 4767

what I have gone for to get the image to align perfectly with the top of the text is:

<div style="padding:10px 10px 10px 0;text-align:center; float:left;">
   <img src="image.jpg" style="max-width:80px;max-height:80px;"/>
</div>

Upvotes: 2

Jasper
Jasper

Reputation: 76003

You can use CSS to create a rule for paragraph tags inside of list items that sets the line-height of the p element to a specific value:

.ui-page .ui-content .ui-listview p {
    line-height    : 65px;
    vertical-align : middle;
}

Here is a demo: http://jsfiddle.net/7fdSJ/2/

If you want to allow multiple lines of text then you can add this:

white-space    : normal;

But this has the side-affect that each line will occupy 65px or whatever value you hard-coded for the line-height property.

Here is a demo: http://jsfiddle.net/7fdSJ/3/

Upvotes: 0

Related Questions