Menu
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?
401
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/
170
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;
}
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.
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
