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

jquery html css listview jquery-mobile

12,061

Solution 1

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/

Solution 2

Solution

Here's a working example: http://jsfiddle.net/Gajotres/XawBx/

Used css:

#test {
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    margin:auto; 
    height:80px; 
    width:80px;       
}

Final notes

If you want to find more about how to customize jQuery Mobile page and widgets then take a look at this article. It comes with a lot of working examples, including why is !important necessary for jQuery Mobile.

12,061

Author by

Imran Qadir Baksh - Baloch

Updated on June 09, 2022

Comments

Imran Qadir Baksh - Baloch almost 2 years

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?

Imran Qadir Baksh - Baloch about 11 years

Can you tell me how to make the input to right instead of bottom?
Eli about 11 years

You just need to apply float, see this demo: jsfiddle.net/yWkGR/1. If you don't understand, feel free to ask :)
Imran Qadir Baksh - Baloch about 11 years

This is also same as above Thanks