如何垂直居中固定位置的文本跨度？

我有一個position: fixed;的div，它的高度根據瀏覽器窗口的高度而變化。而且我想在該div內水平居中文本。我怎樣才能使用CSS來完成這個任務？（另外，我想讓它IE8兼容。）如何垂直居中固定位置的文本跨度？

#fixed_div{ 
    position: fixed;  
    top: 40px; 
    bottom: 40px; 
    right: 0px; 
    width: 40px; 
} 

#text_span{ 
    /* ??? */ 
}

來源

2014-10-12 Garnagar

文本是單行還是多行？ – 2014-10-12 09:59:22

..你想要水平或垂直居中文本嗎？你在標題中垂直提到，但是在橫向說的帖子中提到..：/。請明確你的帖子。 – 2014-10-12 10:05:51

頂部：50％的訣竅不準確的，因爲這將是一個低一點，有幾個技巧：

跨度位置是絕對的，頂部是50％，邊緣頂部 - >跨度高度的-50％（可以嘗試％，最好是跨度高度，如果已知的話）。

#text_span { 
    position: absolute; 
    top: 50%; 
    margin-top: -50%; //or pixels (according to Mr. Green it has to be pixels) 
    width: 100%; 
    text-align: center; 
}

裹與具有顯示一個div跨度：表，跨度是顯示：表小區

#wrapper-div { 
    display: table; 
    height: 100%; 
} 
#text_span { 
    display: table-cell; 
    width: 100%; 
    vertical-align: middle; 
}

工作撥弄爲表方法：（它不」 t直接在固定元素上工作，你必須在裏面添加另一個元素）http://jsfiddle.net/a4ndeza5/1/

希望這會有所幫助。

來源

2014-10-12 09:58:49 PiniH

'margin-top：50％'由於呈現與容器相關而不起作用。所以，在您的案例頂部：50％將帶來元素50％底部和邊緣頂部：-50％後再次，它會再次回到默認位置。 _根據logic_。但百分比的保證金最高值是基於寬度而不是高度。對於第二種方法，如果將display：table-cell應用於某個位置：fixed元素，則不會發生任何反應。因此，您的兩種情況都會失敗。 – 2014-10-12 10:02:29

顯示：表格單元不在固定的定位元素上，它位於未固定的範圍內。另外，我也寫過，你可能必須把像素的邊緣頂... – PiniH 2014-10-12 14:40:35

顯示錶不能直接在固定元素上工作，你必須添加另一個元素，工作小提琴：http：// jsfiddle。淨/ a4ndeza5/1 / – PiniH 2014-10-12 14:47:43

如何垂直居中固定位置的文本跨度？

回答

相關問題