水平中心div

在this page上，我想水平居中放置相对于页面的主要#container div。通常我会通过添加CSS规则达到这个目的，水平中心div

#container { margin: 0 auto }

然而，这个页面（我没有写）的布局，使用绝对定位为#container的最下级元素，所以这个属性没有效果。

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

来源

2011-01-12 Dónal

正在使用脚本行吗？ – Starx 2011-01-12 07:54:52

@Starx很好的问题，我已经更新了我的帖子，答案是肯定的 – 2011-01-12 08:05:33

@rquinn为你解答 – Starx 2011-01-12 09:22:21

与@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();  
    }); 
});

来源

2011-01-12 09:36:52 Starx

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

来源

2011-01-12 07:52:14

使用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';

来源

2011-01-12 08:13:49 Alejandro

您可以使用也使用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();  
    }); 
});

来源

2011-01-12 08:32:17

如果你的主容器使用absolute的位置，你可以使用这个CSS使其居中居中;

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

来源

2011-01-12 08:36:58 Sarfraz

很简单。试试这个

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; 
}

来源

2011-01-12 12:32:58

这种方式最适合我。没有改变利润率，但位置。要求： object - > 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>

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

来源

2015-09-03 22:13:13

水平中心div

回答

相关问题