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

I've looked this up and the outlook seems bleak. I'm not interested in using a table. I have 6 or so 'a element' inline-blocks that make up a menu. It's slick, except all the 'a elements' are set to width: auto; to accommodate their text. Without an explicit width, I'm not able to center align them. I have a container div and a child div that wraps around my 'a elements'.

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

Any thoughts? Thanks Mike

有什么想法吗?谢谢迈克

9 个解决方案

#1

You could set the style of the a element to margin: 0 auto, but that doesn't work in IE6. In IE6, you should set the wrapper div to text-align: center, and (optionally) set the text-alignment for the a element back to text-align: left

您可以将a元素的样式设置为margin:0 auto,但这在IE6中不起作用。在IE6中,您应该将包装器div设置为text-align:center,并(可选)将a元素的text-alignment设置回text-align:left

#2

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

will align center on the page

将在页面上对齐中心

#3

the div element will take all the width space of the container element if it isn't set a width value.

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

So if you want to center a div you must set a width...

因此,如果你想要一个div的中心,你必须设置一个宽度......

A solution to your problem (if I have understand it) can be:

解决问题的方法(如果我理解的话)可以是:

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

where your div has became a span and a new div puts the span in the center. Hope this can help you! Bye, Alberto

你的div成为一个跨度,一个新的div将跨度放在中心。希望这可以帮到你!再见,阿尔贝托

#4

My advice is this answer - however someone commented that it wouldn't work in IE6. Here's how to make this work:

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

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

#container {
    text-align: center;
}

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

#5

You need to set margin: 0 auto; on the outer container div, add text-align: center; on the inner div; and use an unordered list to build your menu in the first place.

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

#6

Without setting an explicit width, the <div> tag will automatically expand to 100% of the width of its parent. Therefore, setting margin: 0 auto; will make it center -- with 0px on both the left and right.

如果不设置显式宽度,

标记将自动扩展到其父级宽度的100%。因此,设置保证金:0自动;将使其成为中心 - 左右两侧均为0px。

#7

here a nice workaround for centering a div with no width:

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

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

#8

Here is also a good example for the situation: http://www.cssplay.co.uk/menus/centered.html

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

#9

If you need it centered and dynamically shrinking/expanding to accommodate the content without knowing the width, then your only option really is using a table. It is the only elastic element in HTML repertoire.

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

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

P.S. You can have a div to shrink dynamically as well by setting the float property to float:left or float:right. So it will stick to the left or the right, but you can't have it centered this way.

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

#1

#2

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