如何在 jquery mobile 中居中图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16917280/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to center image in jquery mobile?
提问by Jonh Smid
I need to have in my mobile website an image in the start of the page and in the middle , like the image below:
我需要在我的移动网站的页面开头和中间放置一张图片，如下图所示：
How can i accomplish that in jquery mobile? I need a solution that will place the image always in the middle no matter what screen(mobile) the user uses. Also is there a way that the image will look bigger or smaller according to the screen? Like adopt in every different screen?
我怎样才能在 jquery mobile 中做到这一点？我需要一个解决方案，无论用户使用什么屏幕（移动设备），都可以将图像始终放在中间。还有一种方法可以根据屏幕使图像看起来更大或更小吗？喜欢在每个不同的屏幕上采用？
From the jquery mobile site , when i use the codiqa to create an image in the start of the page and in the middle the code looks like this :
从 jquery 移动站点，当我使用 codiqa 在页面的开头和中间创建图像时，代码如下所示：
<div style="width: 288px; height: 100px; position: relative; background-color: #fbfbfb; border: 1px solid #b8b8b8;">
<img src="http://codiqa.com/static/images/v2/image.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -16px; margin-top: -18px">
</div>
However is not positioned correct and also the margins are in pixels insteaf of percentage , which i guess is wrong.
然而，位置不正确，边距也以像素为单位，而不是百分比，我猜这是错误的。
Any ideas?
有任何想法吗？
回答by Gajotres
Working example: http://jsfiddle.net/Gajotres/5T78X/
工作示例：http: //jsfiddle.net/Gajotres/5T78X/
HTML :
HTML :
<div data-role="page" id="index">
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content" id="content">
<div style="width: 100%; height: 100%; position: relative; background-color: #fbfbfb; border: 1px solid #b8b8b8;">
<img src="http://codiqa.com/static/images/v2/image.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -16px; margin-top: -18px"/>
</div>
</div>
</div>
CSS :
CSS :
#content {
position:absolute;
top:40px;
right:0;
bottom:0;
left:0;
}
回答by Skadi2k3
I think this is more like it: http://jsfiddle.net/5T78X/28/
我觉得这更像是：http: //jsfiddle.net/5T78X/28/
HTML
HTML
<div data-role="page" id="index">
<div data-role="content" id="content">
<figure id="topimg">
<img src="http://codiqa.com/static/images/v2/image.png" alt="image" />
</figure>
</div>
</div>
CSS
CSS
#topimg {
text-align: center; /* center the image */
margin: 1em;
border: 4px solid blue;
border-radius: 5px;
}
#topimg img {
display: inline-block; /* treat the img like text */
max-width: 60px; /*resolution of the img*/
width: 10%; /* shrink to 10% if lower than 60px */
margin: 3em auto; /* add space between top and bottom edge of container */
}
I'm assuming [data-role="page"] { width: 100%; margin:0;}is still set.
我假设[data-role="page"] { width: 100%; margin:0;}仍然设置。
Mixing in styles into the markup is strongly discouraged. Also shifting images around with fixed positioning and discrete pixel values didn't look that right to me.
强烈建议不要将样式混合到标记中。此外，使用固定位置和离散像素值来移动图像对我来说并不合适。
回答by SiD quakers
CSS
CSS
img {
display: block;
margin: auto;
}
