在一行上，最左邊，最右邊最裏面的兩個元素，內容垂直居中，沒有固定大小

如果類似的問題已經存在（我知道他們確實存在），但是我並沒有真正找到什麼我正在尋找，我在這裏變得瘋狂。我希望解決方案能夠在Chrome上運行;與其他瀏覽器的兼容性是可選的。在一行上，最左邊，最右邊最裏面的兩個元素，內容垂直居中，沒有固定大小

讓我畫出我想要的圖片，希望我的ASCII藝術不會混亂。的x S上的線表示的頁面寬度：

 
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 
,-----------. ,---.          
| Contents | | |       ,--------. 
|   | | B |       | some C | 
| A   | | |       `--------' 
`-----------' `---'

A和B應儘可能靠近彼此儘可能的，和A應該觸摸我的窗口的左側。 C應該碰到我窗戶的右邊。在B和C之間是一個空白區域，其相對於三個元素大小而變化。如果C的高度小於A或B，我希望它在線上垂直居中。我想不要使用JavaScript進行佈局。

我試了很多東西，其中：

表不會這麼做，因爲他們分發大小平均OR我需要修復的尺寸，我不能（內容是動態的，雖然尺寸是在一個固定的（可以定義的）範圍內）
浮動的div不能夠垂直居中它們的內容，除非顯示爲表格單元格，但是我不能再浮動它們了。

（這樣的事情將是任何現代的GUI工具包微不足道的。爲什麼web標準落後這麼遠嗎？）

來源

2012-01-24 djfm

如果您未指定每個盒子的至少一個尺寸，您能否解釋如何分配盒子的內容？ – Alohci

http://jsfiddle.net/zEaK9/

HTML：

<div class="left main"> 
    <div class="container"> 
     <div class="contents"></div> 
    </div> 
</div> 
<div class="center main"> 
    <div class="container"> 
     <div class="contents"></div> 
    </div> 
</div> 
<div class="right main"> 
    <div class="container"> 
     <div class="contents"></div> 
    </div> 
</div>

CSS：

div{ 
    height:100px; 
} 
.main{ 
    display:table; 
} 
.left{ 
    background:blue; 
    width:65px; 
    float:left; 
} 
.center{ 
    background:green; 
    width:100px; 
    float:left; 
} 
.right{ 
    background:orange; 
    width:65px; 
    float:right; 
} 
.container{ 
    display:table-cell; 
    vertical-align:middle; 
} 

.contents{ 
    margin:auto; 
    height:20px; 
    width:20px; 
    background:lightGrey; 
}

來源

2012-01-24 23:15:13 mowwwalker

我相信如果.center是500px高，.right需要垂直居中。你的小提琴結果在：http://jsfiddle.net/brentmn/yXjmx/1/ –

@BrentAnderson，我不明白你的意思。 – mowwwalker

看起來不錯，thanxs，我只需要在我的應用程序嘗試它，看看它是否按預期工作與我的實際內容:) – djfm

有什麼不對的表？

這似乎做什麼你問：

http://jsfiddle.net/btuwY/

A，B和C的寬度是固定的，但它們可以是任意值。

來源

2012-01-24 23:14:45

問題是，在我的瀏覽器（鉻）至少，A，B和C佔用太多的水平空間（我想他們儘可能小），我不能讓div垂直對齊（http://jsfiddle.net/btuwY/13/） – djfm

確實。我沒有意識到Chrome不喜歡「*」。雖然我應該猜到了。表格往往是跨瀏覽器的礦區。 –

把所有三個div的A，B，C中的一個div容器，然後指定的div C'S vertical-align爲middle。容器增長到所有三種尺寸的最大值，然後將C放在您想要的位置。（當然，你將A和B向左，C向右）。

來源

2012-01-24 23:21:52

在一行上，最左邊，最右邊最裏面的兩個元素，內容垂直居中，沒有固定大小

回答

相關問題