CSS是一件很棒的事情,但是为什么没有官方的“标准”方式将div和文本垂直对齐在其他容器中呢?我拒绝在我的布局中使用表格,因为让我们面对它,它不再是90年代了!
我知道有一些方法可以使内容显示为垂直居中,使用边距/填充或垂直对齐,并使用行高(根本不是最佳).如果您在同一容器中具有指定高度的div与您希望垂直居中的文本内容相同,则使用边距不起作用,因为文本大小因浏览器而异,因此它实际上不会在所有浏览器中居中.
ANYBODY是否知道是否存在,或者何时会有一种方法可以轻松地使用CSS垂直居中内容,而不是在当前的现代浏览器中使用表格?
解决方法
我建议使用一些轻量级的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();