如何将内部DIV居中对齐到外部DIV？

Question

我有一个类似于这样的底部工具栏:

<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上略有不同。有什么想法吗？

谢谢。

- Awan

---

为了使父容器中的任何内容居中，我们使用以下 CSS：margin: 0 auto;。在您的类中尝试一下，希望它能起作用。这是一个重复的问题... 您需要将其应用于父 div 中的内容。 - Murtaza

我尝试了 <div style="float:left;width:100%;position:fixed;z-index:210;bottom:5px;margin: 0 auto;"> 但仍然在左侧。 - Awan

请重新查看问题。内部Div是工具栏，需要居中对齐。 - Awan

很酷，现在将margin:0 auto赋给你的内部div。 - Murtaza

Answer 1

你的div具有width:100%和float:left，因此它将与页面大小相同，所以无法居中。

正确设置宽度，移除浮动，并在div上应用margin: 0 auto规则使其居中。

我创建了一个jsbin来演示这个过程:

http://jsbin.com/obepad/2/edit

- v42

---

不，它并没有覆盖页面的宽度。可能它在另一个“DIV”中。 - Awan

实际上我错过了一些代码。请查看编辑后的问题。我有一个用于工具栏的内部 Div。 - Awan

Answer 2

在jsfiddle上查看我的演示

关键是要从第二个div中删除float: left;，添加margin: 0 auto;。如果您做不到，请告诉我。

- mkk

Answer 3

删除float: left，添加margin: 0 auto来居中边框盒。text-align: center会对齐文本。您可以在此处查看：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>

- Ninja

Answer 4

针对您的场景，请尝试以下方法：

<div style="width:100%;position:fixed;z-index:210;margin: 0 auto;">

- Brissles

Answer 5

移除内部 div 的浮动。无论您如何定位您的 div，float: left 都会放在左边距中。使用 margin:auto 将您的内部 div 居中。

- jaga3421