html - 为什么没有垂直对齐元素的合法方法？

Question

CSS 是一个很棒的东西，但为什么没有官方的“标准”方式垂直对齐其他容器内的 div 和文本？我拒绝在我的布局中使用表格，因为让我们面对现实吧，现在已经不是 90 年代了!

我知道有一些方法可以使内容显示为垂直居中，使用边距/填充或垂直对齐并适当设置行高(这根本不是最佳选择)。如果您有一个 div 在与您希望垂直居中的文本内容相同的容器中具有指定高度，则使用边距不起作用，因为文本大小因浏览器而异，因此它实际上不会在所有浏览器中居中。

任何人是否知道是否存在或何时会存在仅使用 CSS 且不使用当前现代浏览器中的表格而轻松地将内容垂直居中的方法？

Answer 1

好吧，我建议使用一些轻量级的 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();