How to make image center vertically in Jquery Mobile ListView Control?

css, html, jquery, jquery-mobile, listview

Solution

I assume you want to vertical align your image. If so, you just need to apply this css to your image:

img {
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
}

Demo: http://jsfiddle.net/yWkGR/

Problem

I have following html, http://jsfiddle.net/2bWfL/168/ ``` <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>My Title</h1> </div><!-- /header --> <div data-role="content"> <ul data-role="listview"> <li> <a href="#"> <img width="80" height"80" src="http://www.gravatar.com/avatar/7efa2e4098f60c15d230436ca99d7250?s=32&d=identicon&r=PG" /> <h3>New Latest One</h3> <p>$12,000</p> <input type="text" style="width:75px"/> </a> </li> </ul> </div><!-- /content --> </div><!-- /page --> <style> .ui-input-text{ width: 75px; } </style> </body> ``` But image is not in center vertically. How to make it center?

Original source