Question

在this page上，我想将主#container div相对于页面水平居中。通常我会通过添加CSS规则

来实现这一点

#container { margin: 0 auto }

但是，这个页面的布局（我没有写），使用#container及其大部分子元素的绝对定位，所以这个属性没有效果。

有没有什么方法可以实现这种水平居中而不需要重写布局来使用静态定位？如果这是实现我的目标的唯一方法，我使用JavaScript / JQuery没问题。

Answer 1

与@rquinn答案相同，但这将调整为任何宽度。查看此演示

http://jsfiddle.net/Starx/V7xrF/1/

HTML：

<div id="container"></div>

CSS：

* { margin:0;padding:0; }
#container {
    width:50px;
    position:absolute;
    height:400px;
    display:block;
    background: #ccc;
}

的Javascript

function setMargins() {
    width = $(window).width();
    containerWidth = $("#container").width();  
    leftMargin = (width-containerWidth)/2;    
    $("#container").css("marginLeft", leftMargin);    
}

$(document).ready(function() {
    setMargins();
    $(window).resize(function() {
        setMargins();    
    });
});

Answer 2

您也可以使用jQuery：

  function setMargins() {
    var width = $(window).width();
    if(width > 1024){
        var leftMargin = (width - 1024)/2;
        $("#container").css("marginLeft", leftMargin);    
    }
 }

然后我将此代码放在$(document).ready事件之后：

$(document).ready(function() {

    setMargins();

    $(window).resize(function() {
        setMargins();    
    });
});

Answer 3

容器宽度为1024px，因此您可以尝试给出左值50％和margin-left：-512px。

Answer 4

使用Javascript，这会将#container放在浏览器窗口的中心。

document.getElementById("container").style.top= (window.innerHeight - document.getElementById("container").offsetHeight)/2 + 'px';
document.getElementById("container").style.left= (window.innerWidth - document.getElementById("container").offsetWidth)/2 + 'px';

Answer 5

如果您的主容器使用absolute位置，您可以使用此CSS水平居中;

#container {
   position:absolute;
   width:1000px;  /* adjust accordingly */
   left:50%;
   margin-left:-500px; /* this should be half of the width */
}

Answer 6

这很简单。试试这个

body {
    margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
    text-align:center; /* Hack for Internet Explorer 5/Windows hack. */
}

#Content {
    width:500px;
    margin:0px auto; /* Right and left margin widths set to "auto". */
    text-align:left; /* Counteract to Internet Explorer 5/Windows hack. */
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
}

Answer 7

这种方式对我来说效果最好。没有改变利润，但位置。需要：对象 - ＆gt; margin-left：0;和位置：相对;

点击此处查看示例：jsfiddle 代码：

function setObjPosition(container, object) {
    var containerWidth = $(container).width();
    var objectWidth = $(object).width();

    var position = (containerWidth / 2) - (objectWidth / 2);

    $(object).css('left', position);
}

function setPositionOnResize(container, object) {
    setObjPosition(container, object);
    $(container).resize(function () {
        setObjPosition(container, object);
    });
}

使用：

<script type="text/javascript">
    $(document).ready(function () {
        setPositionOnResize(window, "#PanelTeste");
    });
</script>

它可以在任何容器中居中。

中心div水平

7 个答案: