如何在不知道宽度的情况下居中对齐 div？答案

【问题标题】：How can I center align a div without knowing the width?如何在不知道宽度的情况下居中对齐 div？
【发布时间】：2009-07-14 07:34:38
【问题描述】：

我已经查过了，前景似乎很黯淡。我对使用桌子不感兴趣。我有 6 个左右的“一个元素”内联块组成一个菜单。它很光滑，除了所有“a 元素”都设置为 width: auto;以适应他们的文字。如果没有明确的宽度，我无法将它们居中对齐。我有一个容器 div 和一个围绕我的“a 元素”的子 div。

有什么想法吗？谢谢迈克

【问题讨论】：

能否提供 HTML 和 CSS 的示例？

标签： javascript html css

【解决方案1】：

您可以将 a 元素的样式设置为 margin: 0 auto，但这在 IE6 中不起作用。在 IE6 中，您应该将 wrapper div 设置为 text-align: center，并且（可选）将 a 元素的 text-alignment 设置回 text-对齐：左

【讨论】：

我需要子 div 相对定位 w/ text-align: center。这解决了这个问题。谢谢！

【解决方案2】：

<div style="width: auto; margin-left: auto; margin-right: auto">
 div content
</div>

将在页面上居中对齐

【讨论】：

在没有明确宽度的情况下无法在 Safari 中工作，这就是我正在开发的浏览器。

【解决方案3】：

如果没有设置宽度值，div 元素将占据容器元素的所有宽度空间。

所以如果你想让一个 div 居中你必须设置一个宽度...

您的问题的解决方案（如果我理解的话）可以是：

<div style="text-align:center;"><span>[... yours content ...]</span></div>

您的 div 已成为跨度，而新的 div 将跨度置于中心位置。希望这可以帮到你！再见，阿尔贝托

【讨论】：

【解决方案4】：

我的建议是这个答案 - 但是有人评论说它在 IE6 中不起作用。以下是如何使这项工作：

<div id="container">
    <div id="centeredBlock">centered</div>
</div>

#container {
    text-align: center;
}

#centeredBlock {
    margin: 0 auto;
    text-align: left;
    width: 50%;
}

【讨论】：

【解决方案5】：

需要在外层容器div上设置margin: 0 auto;，在内层div上添加text-align: center;；并首先使用无序列表来构建您的菜单。

【讨论】：

【解决方案6】：

如果不设置显式宽度，<div> 标签将自动扩展为其父级宽度的 100%。因此，设置margin: 0 auto; 会使其居中——左右均为0px。

【讨论】：

【解决方案7】：

这里是一个很好的解决方法，可以使没有宽度的 div 居中：

http://www.kensfi.com/how-to-align-center-a-div-with-no-width-declared/

【讨论】：

【解决方案8】：

这里也是一个很好的例子：http://www.cssplay.co.uk/menus/centered.html

【讨论】：

【解决方案9】：

如果您需要它居中并动态收缩/扩展以适应内容而不知道宽度，那么您唯一的选择就是使用表格。它是 HTML 曲目中唯一的弹性元素。

<table style="margin-left:auto;margin-right:auto;">
    <tr>
        <td>
            Whatever...
        </td>
    </tr>
</table>

附：您也可以通过将 float 属性设置为 float:left 或 float:right 来动态缩小 div。所以它会粘在左边或右边，但你不能这样居中。

【讨论】：