如何在jquery mobile中居图像？

Question

我需要在我的移动网站上有一个图片，在页面的开头和中间，如下图所示：

我如何在jquery mobile中实现这一目标？无论用户使用什么屏幕（移动），我都需要一种能够将图像始终放在中间的解决方案。还有一种方法，根据屏幕图像看起来更大或更小？喜欢在每个不同的屏幕中采用吗？

在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>

然而，定位不正确，边距也是百分比的像素，我猜这是错误的。

有什么想法吗？

Answer 1

工作示例：http://jsfiddle.net/Gajotres/5T78X/

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：

#content {
    position:absolute;
    top:40px;
    right:0;
    bottom:0;
    left:0;
}

Answer 2

我认为这更像是：http://jsfiddle.net/5T78X/28/

<强> 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

#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 */
}

我假设[data-role="page"] { width: 100%; margin:0;}仍在设置中。

强烈建议不要将样式混合到标记中。另外，使用固定定位和离散像素值来移动图像对我来说也不合适。

Answer 3

CSS

img {
    display: block;
    margin: auto;
}