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

Posted 2023-03-06

【中文标题】如何在外部 DIV 的中心对齐内部 DIV

【英文标题】：How to align a inner DIV in the center of the outer DIV

【发布时间】：2012-02-13 03:53:24

【问题描述】：

我有一个像这样的底部工具栏：

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

谢谢

【问题讨论】：

要在父容器的中心制作任何内容，我们使用这个 css margin: 0 auto; 在你的课堂上试试这个希望它有效这是一个重复的问题..你需要将它应用到你的内容中父 div。

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

已编辑：请再次查看问题。内部 Div 是要居中对齐的工具栏。

酷现在把margin:0 auto 给你的内部div

【参考方案1】：

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

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

我制作了一个 jsbin 来展示它的工作原理：

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

【讨论】：

不，它不覆盖页面的宽度。可能是另一个DIV。

实际上我错过了一些代码。请参阅已编辑的问题。我有用于工具栏的内部 Div。

【参考方案2】：

见我的working demo on jsfiddle

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

【参考方案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>

【参考方案4】：

对于您的场景，请尝试：

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

【参考方案5】：

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