如何在流體佈局中垂直縮放和居中文本？ （使用CSS）

Question

我有一個包含標題和內容區域的流體佈局。標題意圖佔據窗口高度的10％，並且內容區域預計佔據剩餘的90％。整個屏幕中的文本應按比例縮放窗口的高度。此外，標題中的文字應垂直居中。除了最後一個，我能夠滿足所有這些要求。有人知道怎麼做嗎？

這是我到目前爲止有：http://jsfiddle.net/nareshbhatia/h2s4h/

我使用em單位做文字的相對大小。每當窗口調整大小時，我都會使用JavaScript來更改body元素的字體大小。這種方法可以精美地爲整個窗口縮放字體。最後，我試圖通過將標題的行高設置爲與其高度相同（即10％）來垂直居中標題文本。這通常將文本垂直居中（當以像素定義高度時），但是在這種情況下，文本不是垂直居中。有想法該怎麼解決這個嗎？

編輯 jsFiddle已更新爲顯示建議的答案。

Answer 1

當您只有一條線時，線高度方法會使文本居中。你正在使用百分比，所以我認爲this question might help in that respect。

你可以做的反而是多用一些jQuery的或JS來，上載：

• 測量段外的高度（或任何元素，您正在使用）在.content

• 計算本段的底部offset與.content（從段落底部邊界到.content div的底部邊界剩餘多少空間）

• 將餘數分爲兩部分，並將該數字作爲該段落的頂部margin或頂部position。

這將讓你有更長的文字，而不會弄亂行高。

如果您想要一個純粹的css解決方案，請檢查這些alternative ways of centering vertically。