如何在 Jquery Mobile ListView 控件中使图像垂直居中？
Posted
技术标签:
【中文标题】如何在 Jquery Mobile ListView 控件中使图像垂直居中？【英文标题】：How to make image center vertically in Jquery Mobile ListView Control? 【发布时间】：2013-03-14 17:51:11 【问题描述】：我有以下 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 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>
但图像不在垂直中心。如何让它居中？
【问题讨论】：
你的意思是垂直，水平居中没有意义？ @Gajotres，正确的。我更新了问题 【参考方案1】：我假设您想垂直对齐您的图像。如果是这样，您只需将此 css 应用到您的图像：
img
position:absolute;
top:0;
bottom:0;
margin:auto;
演示：http://jsfiddle.net/yWkGR/
【讨论】：
你能告诉我如何使输入向右而不是底部吗？ 你只需要应用浮动，看这个演示：jsfiddle.net/yWkGR/1。如果你不明白，请随时问:)【参考方案2】：解决方案
这是一个工作示例：http://jsfiddle.net/Gajotres/XawBx/
使用的css：
#test
position:absolute;
top:0;
bottom:0;
left:0;
margin:auto;
height:80px;
width:80px;
最后的笔记
如果您想了解有关如何自定义 jQuery Mobile 页面和小部件的更多信息，请查看article。它附带了许多工作示例，包括为什么 !important 对于 jQuery Mobile 是必需的。
【讨论】：
这个也和上面一样 谢谢以上是关于如何在 Jquery Mobile ListView 控件中使图像垂直居中？的主要内容，如果未能解决你的问题，请参考以下文章
jquery , jquery ui 和 jquery mobile 如何组合在一起
如何阻止动态元素在 Jquery/Jquery Mobile 中重新绑定？
如何在 jquery 3.1.0 中使用“滑动菜单 Jquery Mobile”？