html - 在 div 中水平居中元素

Question

为了简单起见，假设您有一个 100 像素宽的 div，其中有 3 个 20 像素宽的 div。我怎样才能将它们对齐到它们与 div 中心对齐的位置，留下 20px；每边都有缝隙？

Answer 1

居中一些 HTML 元素始终取决于您的元素和集成依赖性...

您可能对这两种解决方案感到满意，display: inline-block;和 float :左；

两者各有利弊，希望对您有所帮助!

http://jsfiddle.net/HP2DS/1/

<!-- Inline-block -->
<div id='container'>
    <div class='centered' id='content-left'></div><div class='centered' id='content-center'></div><div class='centered' id='content-right'></div>
</div>

#container {
    width: 100px;
    height: 80px;
    text-align: center;
    background: cyan;
}

#container .centered {
    display: inline-block;
    width: 20px;
    height: 100%;
    margin: auto;
    background: magenta;
    border: 1px solid black;
    box-sizing: border-box;
}

<!-- Floating -->
<div id='container-2'>
    <div class='centered' id='content-2-left'></div>
    <div class='centered' id='content-2-center'></div>
    <div class='centered' id='content-2-right'></div>
</div>

#container-2 {
    width: 60px; /* 60px + 2*20px of padding... */
    height: 80px;
    padding: 0 20px;
    text-align: center;
    background: cyan;
}

#container-2 .centered {
    float: left;
    width: 20px;
    height: 100%;
    margin: auto;
    background: magenta;
    border: 1px solid black;
    box-sizing: border-box;
}