如何在另一個兩個（左側和右側）div之間居中div？

Question

我想實現的是類似於THIS的東西，也就是說，有3個按鈕，一個在左邊，一個在中心，右邊一個，在同一個「行」中，但使用css和div，因爲我知道使用表格來佈置頁面是錯誤的。

我想我需要使用浮動，我已經實現了正確的左，右divs，但我不能讓中心的div，以及居中，它只是跳出了行的另外兩個。

我嘗試：

HTML：

<div class="left" ><input type="button" value="left" /></div> 
<!--<div class="center" ><input type="button" value="center" /></div>--> 
<div class="right" ><input type="button" value="right" /></div> 

<!-- If I uncomment the center div, the right one appears in another block, below the others--> 

CSS：

.left { 
    float:left; 
} 
.right { 
    float:right; 
} 
.center{ 
    /*what do i put here??*/ 
} 

here is a fiddle與，亂了。

我該如何實現它，並獲得最接近表格佈局的例子？

注意：我查看了其他類似的問題，但我找不到具有完全相同問題的問題。

Answer 1

如何：

.left { 
    float:left; 
    width: 33.3% 
} 
.right { 
    float:right; 
    width: 33.3%; 
    text-align: right; 
} 
.center{ 
    float: left; 
    width: 33.3%; 
    text-align: center; 
} 

DEMO

編輯迴應評論

如果你想包括邊界，你需要更新相應的寬度。 CSS使用一個box model，其中總寬度是邊距+邊框+填充+內容（由width屬性控制）。這是一個DEMO，它爲每個div添加1px邊框並相應地更新寬度。

Answer 2

這將做到這一點（第2次修訂）。

移動.center DIV後兩個浮動元素：

<div class="left"> 
    <input type="button" value="left" /> 
</div> 
<div class="right"> 
    <input type="button" value="right" /> 
</div> 
<div class="center"> 
    <input type="button" value="center" /> 
</div> 

的CSS，你可以簡單地使用text-align: center居中輸入按鈕，因爲它是一個內聯元素。

.left { 
    float:left; 
} 
.right { 
    float:right; 
} 
.center { 
    text-align: center; 
    outline: 1px dotted blue; /* to show content box limits */ 
    margin: 0 150px; 
} 

如何工作

浮動元素被定位成或者與頂部邊緣或者鄰近所述父容器的頂部或所述底部邊緣父容器的左邊緣或右邊緣浮動元素之前的最近塊元素。

如果你想左右浮動出現在同一水平線上的元素，他們需要的是彼此相鄰，這就是爲什麼.center元左右浮動後出現。

.center元素（在本例中爲輸入按鈕）中的內容環繞左和右浮動元素，這意味着內聯框（包含內容的虛構框）的長度會縮短以使浮動元素的空間，這意味着內容線從左元素的右邊緣延伸到右元素的左邊緣。當您使用text-align: center時，輸入按鈕位於縮短的行內框的中心，這就是爲什麼如果左右按鈕長度不同，元素顯示偏離中心。

爲了解決這個問題，你需要爲浮游物提供一些空間。這樣做的一個簡單方法是設置相等的左右邊距，例如，margin: 0 150px。

如果提前知道標籤，則容限值很容易計算出來。

但是，爲此，三個標籤的長度必須小於線的長度，否則，居中是不可能的。

請參閱最新演示。

Fiddle Demo

Answer 3

看看http://oocss.org/grids_docs.html

我用這一切。這是非常容易和可擴展的。

短期答案：

.unit { 
    float: left; 
} 
.last-unit { 
    float: none; 
    display: table-cell; 
    width: auto; 
} 
.size1of3 { 
    width: width:33.33333%; 
} 
.pull-content-right { 
    text-align: right; 
} 
.pull-content-left { 
    text-align: left; 
} 
.center-content { 
    text-align: center; 
} 

<div class="line"> 
    <div class="unit size1of3 pull-content-left"> 
    </div> 
    <div class="unit size1of3 center-content"> 
    </div> 
    <div class="unit size1of3 last-unit pull-content-right"> 
    </div> 
</div>