爲什麼沒有一種合法的方式來垂直對齊元素？

CSS是一件美妙的事情，但爲什麼沒有官方的「標準」方式垂直對齊其他容器內的div和文本？我拒絕在我的佈局中使用表，因爲讓我們面對它，它不是90年代了！爲什麼沒有一種合法的方式來垂直對齊元素？

我知道有一些方法可以讓內容垂直居中顯示，使用邊距/填充或垂直對齊線條高度（根本不是最佳）。如果您在與要垂直居中的文本內容相同的容器中具有指定高度的div，則使用邊距不起作用，因爲文本大小因瀏覽器而異，因此實際上並不會在所有瀏覽器中居中。

是否ANYBODY知道是否存在或者何時會存在一種輕鬆地將內容與CSS垂直居中的方法，而不是在當前的現代瀏覽器中使用表格？

2012-05-18 Charles John Thompson III

那麼我建議使用一些輕量級的jQuery插件，它可以滿足您的所有需求。這裏的例子：

(function ($) { 
// VERTICALLY ALIGN FUNCTION 
$.fn.vAlign = function() { 
    return this.each(function(i){ 
    var ah = $(this).height(); 
    var ph = $(this).parent().height(); 
    var mh = Math.ceil((ph-ah)/2); 
    $(this).css('margin-top', mh); 
    }); 
}; 
})(jQuery);

然後你剛剛使用功能上要選擇：

$('#example p').vAlign();

來源

2012-05-18 10:48:41 Malyo

也許如果我使用jQuery的，還怎麼會變成這樣適用於文本對齊？ –

在我的例子中，你可以保留任何元素，儘管它是否是文字，在所有瀏覽器中都支持 – Malyo

你可能要檢查this article，其中介紹的垂直居中子元素只有CSS-技術任何寬度和高度。

來源

2012-05-18 10:55:45 Ana

你可以試試這個：

<div style="display:table-cell; vertical-align:middle"> ... </div>

我想你列出的所有其他方法

來源

2012-05-18 11:13:03 MikeCruz13

段落？ – aurel

什麼CSS支持所有瀏覽器？我會檢查像http://caniuse.com/或類似的網站，以決定是否要使用各種CSS選項。 – MikeCruz13

爲什麼沒有一種合法的方式來垂直對齊元素？

回答

相關問題