0

这不是我第一次遇到这个问题并且从来没有机会弄清楚正确的事情。

所以问题来了：

我有 2 个 div。他们每个人都有一个标题。根据标题的长度，标题可能必须适合或不适合 2 行。所有这些都是从 CMS 生成的，因此无法判断其中一个在给定时间是否有 2 行或 1 行（因此，如果它们有 1 行或 2 行，我不能将它们与类分开）

这是有趣的部分：我希望这两个 div 中的标题垂直居中。行高不会这样做，因为它总是有可能在 1 或 2 行上，并且 display:table-cell + vertical-align:middle 与 IE7 不兼容。

那么有没有办法让这些标题垂直居中并且适用于每个浏览器？

编辑：这是我试图解释的情况的照片：

在此处输入图像描述

编辑#2：这是一个重新创建我的示例的代码示例。我们想让它们都居中。http://jsfiddle.net/m7bLj/

编辑＃3：

在@mikhailvs 的回答之后，我想出了这段代码，它很有效。

$(document).ready(function(){
    $(".container-div").each(function(){
        $(this).children('div').css('top', String($(this).height() / 2 - $(this).children('div').height() / 2) + 'px');
    })
})
4

1 回答 1

1

如果你愿意使用 jQuery，你可以这样做：

var div1onLoadCallback = function () {
     var w = $(window);
     var div1 = $('#div1');
     div1.css('top', String(w.height() / 2 - div1.height() / 2) + 'px');
}

然后像这样声明你的 div<div id="div1" onload="div1onLoadCallback()"></div>

对于第二个 div 也是如此。粗略地说，您需要修改position标题的 css 属性才能使其工作（例如position: absolute）。

于 2012-07-09T20:26:02.400 回答