如何在另外一個div內對齊3個div（左/中/右）？

我想在容器div中對齊3個div，以下所示：

[[LEFT]       [CENTER]        [RIGHT]]

容器div的寬度爲100％（未設置寬度），調整容器大小後，居中div應該保持居中。

因此我設置：

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

但它變成：

[[LEFT]       [CENTER]              ]
                              [RIGHT]

有小費嗎？

---

#1樓

若是您不想更改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/

---

#2樓

這是當我以圖像爲中心元素時必須對接受的答案進行的更改：

1. 確保圖像包含在div中（本例中爲#center ）。 若是不是，則必須將display設置爲block ，而且它彷佛相對於浮動元素之間的空間居中。

2. 確保設置圖像及其容器兩者的大小：

   #center { margin: 0 auto; } #center, #center > img { width: 100px; height: auto; }

---

#3樓

我喜歡個人槓鈴緊湊而充滿活力。 這是針對CSS 3和HTML 5的

1. 首先，將「寬度」設置爲100px是有限制的。 不要這樣

2. 其次，將容器的寬度設置爲100％能夠正常工做，直到談論它是整個應用程序的頁眉/頁腳欄，例如導航欄或信用/版權欄。 使用right: 0; 而不是那種狀況。

3. 您正在使用id（哈希#container #left ， #container #left等）而不是類（ .container ， .left等），這很好，除非您想在代碼中的其餘地方重複樣式樣式。 我會考慮使用類代替。

4. 對於HTML，無需將順序交換爲：左，中和右。 display: inline-block; 解決此問題，將您的代碼返回到更整潔且邏輯上又有序的位置。

5. 最後，您須要清除全部浮動內容，以避免與未來的<div> 。 您能夠clear: both;作到這clear: both;

總結一下：

HTML：

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

CSS：

.container {right: 0; text-align: center;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }

若是使用HAML和SASS則有加分；）

HAML：

.container
  .left
  .center
  .right
  .clear

SASS：

.container {
  right: 0;
  text-align: center;

  .left, .center, .right { display: inline-block; }

  .left { float: left; }
  .center { margin: 0 auto; }
  .right { float: right; }
  .clear { clear: both; }
}

---

#4樓

您已正確完成操做，只須要清除浮動便可。 只需添加

overflow: auto;

到您的容器類。

---

#5樓

使用該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取其高度，並可能容許兩側伸出底部。