将3个浮动的div居中放置在一个包裹div内

Question

我有三个内联的div在一个包装div中。我希望这三个div都位于100%宽度的包装div的中心。

我尝试过使用margin: 0 auto，但是由于100%宽度的原因它没有起作用。

以下是代码：

#first, #next, #last {
    float: left;
    width: 300px;
    height: 320px;
    border: 1px solid black;
}



#content #kompetenzen {
    text-align: center;
}

以及HTML

<div id="kompetenzen">
    <div id="first">

        <img src="images/kompetenzen/graphic.png" alt="Werbegrafik" />
        <ul>
            <h3>HEADER</h3>
            <br>
            <li>LEISTUNG1</li>
            <li>LEISTUNG2</li>

        </ul>
    </div>

    <div id="next">

        <img src="images/kompetenzen/design.png" alt="Werbegrafik" />
        <ul>
            <h3>HEADER</h3>
            <br>
            <li>LEISTUNG1</li>
            <li>LEISTUNG2</li>
            <li>LEISTUNG3</li>
            <li>LEISTUNG4</li>


        </ul>
    </div>

    <div id="last">
        <img src="images/kompetenzen/dev.png" alt="Werbegrafik" />
        <ul>
            <h3>HEADER</h3>
            <br>
            <li>LEISTUNG1</li>
            <li>LEISTUNG2</li>

        </ul>
    </div>
    <div style="clear:both"></div>
</div>

- Thomas Klammer

---

你能发一下你的HTML吗？我会在fiddle上尝试解决这个问题，但我需要HTML。 - yaakov

你的HTML如何在内容div中水平居中？ - nelek

Answer 1

将 #first 中的 float:left 删除，替换为 display:inline-block;

#first, #next, #last {
    width: 300px;
    display:inline-block;
    height: 320px;
    border: 1px solid black;

}



#kompetenzen {
    text-align: center;
}

http://jsfiddle.net/70e2uqc1/1/

- yaakov

---

它应该居中于屏幕 (#kompetenzen 宽度为100%) --> 屏幕尺寸 - Thomas Klammer

没有 #content，所以 CSS 选择器 #content #kompetenzen 没有起作用。 - yaakov

如果它们具有不同的内容，它们就不会保持在同一行 :S。 - Thomas Klammer

Answer 2

#content #kompetenzen可以使用display:flex; align-items:center; justify-content: center。这将使三个div垂直和水平居中。 更新 请注意浏览器兼容性并正确使用供应商前缀。

- Farzad Yousefzadeh

---

顺带一提，如果这个回答对你有帮助，请接受答案。谢谢！ - Farzad Yousefzadeh

现在项目已经居中了。但问题是如果浏览器宽度变小（或移动端），我希望div可以堆叠起来，但使用这段代码无效了。 - Thomas Klammer

只需添加 #first, #second, #third { width:33% }，它们就会始终在中间堆叠。如果需要的话，还可以使用 @media queries。 - Farzad Yousefzadeh

@ThomasKlammer 那就不要使用固定尺寸的 px，而是使用百分比。同时还要注意填充和边距。 - nelek