Question

我有3个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>

Answer 1

从float:left等处移除#first，并将其替换为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/

Answer 2

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

中心3在包装div内浮动div

2 个答案: