Question

CSS是一件很棒的事情，但是为什么没有官方的“标准”方式将div和文本垂直对齐在其他容器中呢？我拒绝在我的布局中使用表格，因为让我们面对它，它不再是90年代了！

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

是否 ANYBODY 知道是否存在，或者何时会有一种方法可以轻松地仅使用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();

Answer 2

您可能需要查看this article，它提供了一种仅限CSS的技术，可以垂直居中任意宽度和高度的子元素。

Answer 3

你可以试试这个：

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

我认为你列出了所有其他方法

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

3 个答案: