Question

编辑：向那些回答未包含无序列表并发症的原始问题的人致歉。

每当我将多个div元素包含无序列表放入另一个div元素时，我就无法将内部div元素居中。这是一个简单的插图和随附的代码：

enter image description here

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-Ca" xml:lang="en-Ca">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            #container {
                border:solid;
                overflow:hidden;
                width:40%;
            }
            #one, #two, #three {
                border: solid red;
                display:inline-block;
                margin:0 auto;
            }
            .clear {
                clear:both;
            }
        </style>
    </head>
    <body>
    <div id="container">
            <div id="one">
                <ul>
                    <li>One</li>
                    <li>Two</li>
                    <li>Three</li>
                </ul>
            </div>
            <div class="clear"></div>
            <div id="two">
            <ul>
                <li>Four</li>
                <li>Five</li>
                <li>Six</li>
                </ul>
            </div>
            <div class="clear"></div>
            <div id="three">
            <ul>
                <li>Seven</li>
                <li>Eight</li>
                <li>Nine</li>
                </ul>
            </div>
        </div>
    </body>
</html>

我是否放置display：inline-block或float：left似乎没有任何区别，也没有添加包装类或指定宽度。如何将黑框中的三个红色框居中？

Answer 1

你介意只使用CSS3解决方案吗？如果没有，您可以使用弹性框模型，请参阅http://css-tricks.com/snippets/css/a-guide-to-flexbox/

如果您希望它在CSS2中也可以使用，margin: 0 auto只能在具有指定的元素上正常工作。您可以通过使用带有white-space: pre和text-align: center

的内嵌块来解决此问题

请参阅：http://jsfiddle.net/aX8AG/3/

HTML：

<div>
    <ul>
        <li>A</li><li>B</li><li>C</li>
    </ul>
    <ul><li>AAA</li><li>BBB</li><li>CCCC</li></ul>
    <ul><li>AA</li><li>BB</li><li>CC</li></ul>
</div>

CSS：

div {
    border: 1px solid black;
    text-align: center;
}

ul {    
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline-block;
    padding: 0 10px;
    border: 1px solid red;
}

注意：我将li上的float更改为inline-blocks，注意LI之间的空格仍然是不需要的，但现在允许UL之间的空格

Answer 2

为这些框创建一个新容器，并将其放在中心：http://jsfiddle.net/ugh5M/：

#wrapper {
    margin:0 auto;
    width:30%;
}

Answer 3

删除

float: left;

使红框居中的声明......

Answer 4

而不是：

    #one, #two, #three {
        border: solid red;
        float:left; <------ Take this out and they will center
        width:30%;
        margin:0 auto; /* doesn't do anything */
    }

这样做：

    #one, #two, #three {
        border: solid red;
        width:30%;
        margin:0 auto; /* does something */
    }

如果你看这里它是有效的：DEMO

Answer 5

删除float: left;，因为它会覆盖margin: 0px auto;

http://jsfiddle.net/TaF8W/152/

Answer 6

不确定为什么你漂浮然后清除它们，这似乎反直觉？

HTML

 <div id="container">
            <div id="one">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum nec nibh ut fringilla. Vestibulum egestas velit quis blandit 
                imperdiet. Nullam sollicitudin commodo odio. Mauris pharetra arcu vel porta dignissim.
            </div>
            <div class="clear"></div>
            <div id="two">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum nec nibh ut fringilla. Vestibulum egestas velit quis blandit 
            imperdiet. Nullam sollicitudin commodo odio. Mauris pharetra arcu vel porta dignissim.
            </div>
            <div class="clear"></div>
            <div id="three">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum nec nibh ut fringilla. Vestibulum egestas velit quis blandit 
            imperdiet. Nullam sollicitudin commodo odio. Mauris pharetra arcu vel porta dignissim.
            </div>
        </div>

CSS

#container {
                border:solid;
                overflow:hidden;
                width:50%;
            }
            #one, #two, #three {
                border: solid red;
                width:30%;
                margin:0 auto; /* doesn't do anything */
            }

演示jsFiddle：http://jsfiddle.net/jerryhuangme/bdVcm/

如何将另一个div中包含的多个div（浮动左侧）居中

6 个答案: