如何在另一个div内对齐3个div（左/中/右）？

我想在容器div内部对齐3个div，如下所示：

[[LEFT]       [CENTER]        [RIGHT]]

集装箱格是100％宽（没有设定宽度），并且在重新调整集装箱大小后，中央格应保持居中。

所以我设定了：

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

但它变成：

[[LEFT]       [CENTER]              ]
                              [RIGHT]

有小费吗？

---

用这个CSS，把你的div放在这里（首先浮动）：

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

PS你也可以向右漂移，然后离开，然后居中。 重要的是浮标来到“主要”中心部分之前。

PPS你经常想要在#container这个片段内： <div style="clear:both;"></div> ，它将垂直扩展#container以包含两侧浮动，而不是仅从#center取其高度，并可能允许两侧伸出底部。

---

如果你不想改变你的HTML结构，你也可以通过添加text-align: center; 包装器元素和一个display: inline-block; 到居中的元素。

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

现场演示：http://jsfiddle.net/CH9K8/

---

使用Flexbox水平对齐三个Div

这里是一个CSS3方法，用于在另一个div内水平对齐div。

#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}

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

链接地址: http://www.djcxy.com/p/75773.html

上一篇: How to align 3 divs (left/center/right) inside another div?

下一篇: Centering header image div in whole page / not browser window size