Question

想知道是否有人可以建议在水平滚动网站的屏幕中间将div居中的最佳方式。

我希望标题保持在屏幕中央，但网站的其余部分会滚动。通常我只是将左右边距设置为零，但是当宽度设置为完整的滚动宽度时，我想我首先需要做一些jQuery技巧才能找到窗口宽度？

非常感谢任何建议！

Answer 1

可以用CSS完成，不需要javaScript。

<div class="page">
    <div class="header"></div>
</div>

.page{
    width:2000px;
    height:500px;
}
.header{
    width:300px;
    height:100px;
    background-color:red;
    position:fixed;
    top:0;
    left:50%;
    margin-left:-150px; /* negative half the width */

}

检查http://jsfiddle.net/ZEcax/

处的工作示例

Answer 2

您应该查看Center 2.0插件。它完全符合您的要求。

Answer 3

这很容易。

CSS：

 #center {
    position: fixed;
}

jQuery的：

$('#center').css({
    'top': $(window).height()/2,
    'left': $(window).width()/2,
    'margin-left': $('#modal').width/2,
    'margin-top': $('#modal').height()/2
});

HTML

<div id="center">
    <!-- content goes here -->
</div>

将水平滚动网站中的div居中

3 个答案:

检查http://jsfiddle.net/ZEcax/