中心幾個未知高度的div

Layout

-------------------- 
Centered Header (Vert+Horizontally) - 15% 
-------------------- 
Centered Image (Vert+Horizontally) - 50% 
-------------------- 
Centered Description (Vert+Horizontally) - 35% 
--------------------

每個是總高度的百分比（15％，50％，35％），這是未知的，因爲我有幾個不同的按鈕高度，它需要處理。

的jsfiddle：http://jsfiddle.net/x3zq96d5/

我已經試過所有我能在網上找到，包括「圍繞在未知」的網頁，其中看起來最適合我想要。

每個解決方案都有可怕的破碎的東西。我需要做些什麼才能讓每個元素集中在未知高度的中心？

來源

2015-04-18 Colin Fogle

您可以通過使用display: table和display: table-cell CSS規則來做到這一點。請參閱此處獲取更新的小提琴：http://jsfiddle.net/x3zq96d5/5/

爲了使這項工作，您設置display: table和在你有三個百分比高度的每個div。然後，您需要在其中添加一個子div，其中包含display: table-cell和vertical-align: middle。讓這個div有效地獨立執行垂直對齊 - 那麼你只需要在你的子div內添加你的內容，並且它會根據你的意願垂直對齊。

缺點是你必須以沒有語義含義的子div的形式添加標記，但我認爲這是一個小的代價，並且是實現你想要的最好的方法。此外，您需要小心您的內容 - 在小提琴中使用了h4和p標籤，並且這些標籤具有由瀏覽器設置的默認頂部/底部邊距 - 如果此邊距大於百分比高度div中的可用空間，它會將內容從垂直對齊中推出。相當明顯，但值得注意。

來源

2015-04-19 00:14:17

這做了我所需要的 - 添加空白div有點難看，但我認爲這裏的價值是值得的。之後必須根據填充/保證金對內容進行一些調整，但似乎是在我的路上。謝謝！ –

是的，在理想的世界裏，額外的div不會在那裏。問題是像[flexbox model]（http://caniuse.com/flexbox）這樣較新的CSS功能，只有在較新的瀏覽器版本中才能支持這些功能，這些功能可以很好地解決這些問題。像往常一樣，它是老式的CSS黑客和更新的CSS功能的混合體。 –

你想做什麼？在你所附的圖片上，你說所有的高度都是未知的，但在jsfiddle中，你宣稱.btn的高度爲190px。

那麼，你想要有多大的父母是？爲了讓自己更容易，您應該聲明具有15％，50％和35％高度的元素的父元素的高度。在這種情況下，.btn可以是百分比或固定值。作爲一個百分比，

height:100%

請注意，如果您設置的.btn至100％的高度，它將繼承其高度從其父，即使它通常是由高度定義的高度它的孩子。當你以百分比的形式聲明它的高度時，它看起來是父母的，併成爲其百分比。（即一個高度爲50％的div將是其父母的一半高，其他都保持不變）。

如果你想要的高度是瀏覽器窗口的100％，你可以做

html, body, ul, .tall, .btn { 
    height:100%; 
}

獲得高度的瀏覽器需要你申報你的身高爲100％所有的方式是一樣高最多html。或者你可以設置一個固定的高度。btn，它們是很好，現在更容易

.btn {height:1000px}

，設置子元素的高度，

btn-modal-header { 
    height:15%; 
} 

.btn-modal-glyph { 
    height: 50%; 
} 

.btn-modal-description { 
    height: 35%; 
}

這將導致他們成爲其父的高度給定％。

至於垂直居中他們，你需要聲明一個父與

display:table

及其子

display:table-cell

它不必是直接的孩子，但它更容易這條路。所以，你可以做這樣的事情：

.btn > * { 
    display:table; 
    width:100%; 
} 

.btn > * > * { 
    display:table-cell; 
    vertical-align:middle; 
}

其設置與15%, 50%, and 35%高度，以display:table和他們的孩子的孩子顯示爲table-cell秒。然後，您只需將其垂直對齊設置爲middle即可。

的jsfiddle：如果http://jsfiddle.net/x3zq96d5/6/

通知您垂直調整瀏覽器，高度現正在從窗口的大小繼承，一路下來給孩子。

來源

2015-04-19 00:20:45

中心幾個未知高度的div

回答

相關問題