垂直居中的元素和開關如果高度太小，對齊頂部

我一直在試圖找到一個答案，但我發現的只是討論垂直居中元素。垂直居中的元素和開關如果高度太小，對齊頂部

我想要做的是垂直居中一個div，我知道如何處理CSS。問題是，如果高度太小，它仍會居中並切斷頂部和底部。

這裏是我的意思演示：http://jsfiddle.net/reitermarkus/23B43/
全屏演示：http://fiddle.jshell.net/reitermarkus/23B43/show/light/

你能告訴我如何對齊頂部如果高度太小？最好沒有JS。

謝謝
馬庫斯

來源

2012-04-21 reitermarkus

你可能可以確定高度是否低於所需的最低限度的唯一方法是通過JS。 – trickyzter 2012-04-21 13:54:33

我發現它使用最大高度的CSS媒體查詢。 – reitermarkus 2012-04-21 14:30:17

你可能確定高度是否需要低於最低的唯一方法是通過JS：

var el = document.getElementById('id'); 
    var el_height = el.offsetHeight; 

    if(el_height < min_height){ 
    //apply class or inline style 
    el.className = 'align_top'; 
    }

顯然，您需要定義MIN_HEIGHT VAR 。此外，對於DOM操作，最好使用jQuery。將元素對齊到文檔的頂部只是刪除負邊距並將「頂部」定義爲0的情況;

來源

2012-04-21 13:59:48 trickyzter

你好，謝謝你的回答，但實際上有一種方法可以在沒有JS的情況下完成。我不知道你可以使用最大高度的媒體查詢，但它完美的作品。 – reitermarkus 2012-04-21 14:37:17

啊，對不起，我以爲你的意思是div的高度，而不是瀏覽器的視口。另外值得一提的是，媒體查詢只在現代瀏覽器中被支持，您仍然必須使用JS來實現向後兼容。 – trickyzter 2012-04-21 15:01:50

垂直居中的元素和開關如果高度太小，對齊頂部

回答

相關問題