如何将内部 DIV 与外部 DIV 的中心对齐
我有一个像这样的底部工具栏：
<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 上它是不同的。 有什么想法吗？
谢谢
I have a bottom toolbar like this:
<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>
But this toolbar is aligned on left side of the page. I want this DIV to be in the center of the page. Means same space area on the both side(left and right) of the toolbar. I can't fix the width of the toolbar, it is always 100%. I tried by setting fixed margin-left but it is different on different browsers/resolutions and iPad.
Any idea ?
Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
您的 div 具有
width:100%和float:left，因此它将与您的页面大小相同，并且您将无法居中。正确设置宽度，删除该浮动并在 div 上应用
margin: 0 auto规则以使其居中。我制作了一个 jsbin 来显示其工作原理：
http://jsbin.com/obepad/2/edit
Your div has
width:100%andfloat:left, so it will be the same size of your page and you won't be able to center.Set your width properly, remove that float and apply a
margin: 0 autorule on your div to center it.I made a jsbin to show that working:
http://jsbin.com/obepad/2/edit
请参阅我的 jsfiddle 上的工作演示
关键是您应该删除 float: left;从第二个 div 开始并添加边距：0 auto;。如果您做不到，请告诉我
See my working demo on jsfiddle
the key thing is that you should remove float: left; from the second div and add margin: 0 auto;. If you can't do this please let me know
根据您编辑的问题进行编辑：
删除 float: left 并添加 margin: 0 auto 以对齐边框框。 text-align：居中对齐文本。您可以在这里查看： http://jsfiddle.net/wFZNv/
这是代码：
Editted based on your edited question:
Remove float: left and add margin: 0 auto to align the border box. text-align: center will align the text. You can check it here: http://jsfiddle.net/wFZNv/
This is the code:
对于您的场景，请尝试：
For your scenario, try:
删除内部 div 的浮动。无论您如何定位 div，float : left 都会放入左边距。使用 margin:auto 将内部 div 居中
Remove float for inner div. No mater how you position your div, float : left will put in to the left margin. use margin:auto to center your inner div