我目前正在使用 css/jquery 构建一个弹出框脚本,但在所有情况下我似乎都无法让 div 居中在屏幕上。是否可以在不知道 div 宽度的情况下将其居中?
我没有在此处发布所有代码,而是在http://goo.gl/N45cp上提供了一个实时示例
非常感谢任何形式的帮助!
最好的问候约翰
我目前正在使用 css/jquery 构建一个弹出框脚本,但在所有情况下我似乎都无法让 div 居中在屏幕上。是否可以在不知道 div 宽度的情况下将其居中?
我没有在此处发布所有代码,而是在http://goo.gl/N45cp上提供了一个实时示例
非常感谢任何形式的帮助!
最好的问候约翰
<div id="wrapper">
<div id="child"></div>
</div>
如果 的位置#child
不是absolute
,可以将左右边距设置为auto
:
#child {
margin: 0 auto;
}
或者,如果职位是absolute
您可以尝试以下操作:
$("#child").css("left", function(){
return ($("#wrapper").width() - $(this).width()) / 2;
});
如果你有一个包含的 div,你可以用纯 CSS 实现这一点:
HTML
<div id="outer">
<div id="inner">some content here</div>
</div>
CSS
body, html, div#outer { height:100%; }
div#outer { text-align:center; }
div#inner { display:inline-block; }
</p>