在一个 div 中水平居中元素

Question

为了简单起见，假设你有一个宽度为100像素的div，里面有3个宽度为20像素的div。我该如何使它们对齐到div的中心，并在两侧留下20像素的间隔？

- Optiq

---

为了使它更容易，您可以发布一个JSFiddle。 - Yenn

除了父级 div 的大小外，是否预先知道其他任何信息？子 div 的实际宽度是否可变？子 div 的数量是否可变？ - Matt Coughlin

Answer 1

始终将一些HTML元素居中始终取决于您的项目和集成依赖关系...

您可能会对以下两种解决方案感到满意：display:inline-block; 和 float:left;

两者都有优缺点，希望这能帮到您！

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;
}

- Flo Schild

Answer 2

好的一天！这是我实现它的方式：

HTML

<div id="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS (层叠样式表)

#container {
  width: 100px;
  height: 100px;
  border: 1px solid red; /** for viewing purposes **/
  text-align: center; /** center the divs **/
  font-size: 0; /** remove the unwanted space caused by display: inline-block in .child **/
}

#container .child {
  display: inline-block; /** set the divs side-by-side **/
  vertical-align: top;
  width: 20px;
  height: 100px;
  font-size: 12px; /** override font-size: 0 of #container, so that text will be visible again **/
  text-align: left; /** set text in the .child divs back to normal alignment **/
  border: 1px solid blue; /** for viewing purposes **/
  box-sizing: border-box;
}

我希望这能帮到你。干杯！:)

- Arnelle Balane