html - 如何将包含在另一个 div 中的多个 div(向左浮动)居中-6ren

html - 如何将包含在另一个 div 中的多个 div(向左浮动)居中

转载作者：太空宇宙更新时间：2023-11-04 14:18:33

编辑:向那些回答原始问题但未包含无序列表复杂性的人致歉。

每当我将多个 包含无序列表 的 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 似乎都没有任何区别，添加包装器类或指定宽度也没有。如何使三个红色框在黑色框内居中？

最佳答案

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

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

的内联 block 来解决这个问题

参见: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 更改为内联 block ，注意 LI 之间的空格仍然不需要，但现在允许 UL 之间的空格

关于html - 如何将包含在另一个 div 中的多个 div(向左浮动)居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20115447/