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

由于

Answer 1

您的div有width:100%和float:left，因此它与您的网页尺寸相同，您将无法居中。

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

我做了一个jsbin来表明工作：

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

Answer 2

查看我的working demo on jsfiddle

关键是你应该删除float：left;从第二个div添加保证金：0 auto;。如果你不能这样做，请告诉我

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>

Answer 4

对于您的方案，请尝试：

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

Answer 5

删除内部div的浮动。无论你如何定位div，float：left都会放入左边距。使用保证金：自动将您的内部div居中

如何在内部DIV的中心对齐内部DIV

5 个答案: