如何在外部DIV的中心对齐内部DIV
如何在外部DIV的中心对齐内部DIV
提问于 2012-01-18 20:16:34
我有一个底部的工具栏，如下所示：
<div style="float:left;width:100%;position:fixed;z-index:210;bottom:5px;">
<div style="float:left;width:928px;border:1px solid #000;background:url('/images/noise-bg.jpg') repeat-x;height:26px;padding:5px;">
Toolbar Content
<div>
</div>但此工具栏在页面的左侧对齐。我要把这个DIV放在页面的中央。表示工具栏两侧(左侧和右侧)的相同空间区域。我不能固定工具栏的宽度，它总是100%。我尝试通过设置固定的margin-left，但它在不同的浏览器/分辨率和iPad上是不同的。有什么想法吗？
谢谢
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-01-18 20:18:19
你的div有width:100%和float:left，所以它和你的页面大小一样，你不能居中。
正确设置宽度，删除浮动，并在div上应用margin: 0 auto规则使其居中。
我做了一个jsbin来展示它的工作：
http://jsbin.com/obepad/2/edit
Stack Overflow用户
发布于 2012-01-18 20:35:07
查看我的working demo on jsfiddle
关键是您应该从第二个div中删除float: left；，并添加空白处:0 auto；。如果你不能做到这一点，请告诉我
Stack Overflow用户
发布于 2012-01-18 20:32:42
根据您编辑的问题进行编辑：
删除float: left并自动添加边距:0以对齐边界框。text- align :居中将对齐文本。你可以在这里查看：http://jsfiddle.net/wFZNv/
代码如下：
<div style="float:left;width:100%;position:fixed;z-index:210;bottom:5px;">
<div style="width:928px;border:1px solid #000;background:url('/images/noise-bg.jpg') repeat-x;height:26px;padding:5px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; text-align: center; margin: 0 auto;">
Content
<div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8909960
复制相关文章
相似问题
腾讯云开发者
