jquery - 如何使用 jquery mobile 将横幅居中？

Question

我正在构建一个 jquery 移动网站，我希望我公司的横幅定位为 stanford's移动网站，在移动设备中如下所示:

该图像的尺寸为 320x280 ，这意味着它非常适合宽度为 320 的手机屏幕(例如我在本例中使用的 iPhone)。在其他屏幕更大的手机中，它会左右留下间隙，但看起来仍然很棒。

我尝试在我的网站上复制此行为。然而结果看起来远非如此。我使用了斯坦福网站上完全相同的图片，因此我确信不存在尺寸问题。我的网站如下所示:

正如你所看到的，上侧和左侧有一个间隙，我不明白为什么会存在。

深入研究斯坦福大学移动网站，我发现他们用于横幅的 CSS :

/* Home page banner */
h2#banner {
    background:transparent url(../img/banner/banner.jpg) no-repeat left 10px;
    width:320px;
    height:284px;
    margin:-10px auto -150px auto;
    text-indent:-9999px;
}
/* Home page banner landscape */
.landscape h2#banner {
    background:transparent url(../img/banner/banner-landscape.jpg) no-repeat left 10px;
    width:480px;
    height:290px;
    margin:-10px auto -175px auto;
    text-indent:-9999px;
}
/* Remove reduntant extra top padding - don't put h2's in front of ul.listview */
h2 {
    margin:0;
    font-size:20px;
}

我使用了完全相同的代码，但仍然有问题。

您知道 CSS 发生了什么以及如何将其精确居中吗？

----

<小时/>

我还在屏幕更大的手机上尝试了我的网站。横幅居中，左右两侧有间隙。不过，再次强调，应该只有左右有间隙，而不是向上有间隙。

编辑

<小时/>

结合建议的解决方案后，我最终得到了类似的结果:

h2#banner {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:transparent url(images/banner.png) no-repeat left 10px;
    width:320px;
    height:284px;
    margin:-10px auto -150px auto;
    text-indent:-9999px;
}

结果为:

不过，我不能将图像移至上方，以便看到更多横幅。使用之前的解决方案，我只需更改高度属性，并且更多的空间被遮盖/覆盖。我真的认为解决方案就在斯坦福网页内。我找不到它，因为我对此的理解还不成熟。但是CSS真的很小，应该很明显他们在做什么。我喜欢他们用图像覆盖标题的方式，并且图像与其余内容分开工作。

Answer 1

工作示例:http://jsfiddle.net/Gajotres/MgSP7/

HTML:

<div data-role="content">
    <h2 id="banner"></h2>
    <ul data-role="listview" data-theme="b" data-inset="true" id="custom-list">
        <li><a href="item1.html">item1</a></li>
        <li><a href="item1.html">item1</a></li>
        <li><a href="item1.html">item1</a></li>
    </ul>                
</div>

CSS:

#banner {
    position: absolute;
    top:43px;
    bottom: 0;
    left:0;
    right:0;
    padding: 0 !important;
    background:transparent url('http://m.stanford.edu/img/banner/banner.jpg') no-repeat center top !important;
}

#custom-list {
    margin-top: 150px;    
}