Question

我看了这个，前景似乎很暗淡。我对使用表格不感兴趣。我有6个'元素'内联块组成一个菜单。它很光滑，除了所有'a elements'都设置为width：auto;容纳他们的文字。没有明确的宽度，我无法将它们居中对齐。我有一个容器div和一个包含我的'a elements'的子div。

有什么想法？谢谢麦克

Answer 1

您可以将 a 元素的样式设置为 margin：0 auto ，但这在IE6中不起作用。在IE6中，您应该将包装器div设置为 text-align：center ，并（可选）将 a 元素的文本对齐方式设置回 text- align：left

Answer 2

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

将在页面上对齐中心

Answer 3

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

因此，如果你想以div为中心，你必须设置一个宽度......

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

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

你的div变成了一个跨度，一个新的div将跨度放在中心位置。希望这可以帮到你！再见，阿尔贝托

Answer 4

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

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

#container {
    text-align: center;
}

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

Answer 5

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

Answer 6

如果不设置显式宽度，<div>标记将自动扩展到其父级宽度的100％。因此，设置margin: 0 auto;将使其成为中心 - 左侧和右侧均为0px。

Answer 7

这里有一个很好的解决方法，用于居中没有宽度的div：

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

Answer 8

以下是情况的一个很好的例子：http://www.cssplay.co.uk/menus/centered.html

Answer 9

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

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

P.S。您可以通过将float属性设置为float：left或float：right来动态缩放div。所以它会坚持左侧或右侧，但您不能以这种方式居中。

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

9 个答案: