如何跨浏览器垂直对齐元素？

Question

我正在使用vertical-align: middle属性进行垂直对齐，它在Chrome中工作但不在IE中工作。

Answer 1

Supposedly，IE8 +支持vertical-align，但IE7支持是错误的。对于旧版浏览器，您可能需要尝试将元素的容器CSS设置为top: 50%或top: -50%。

Answer 2

如果要在框中放置单行文本（例如标题标题），请使用line-height

例如，宽度为200px，高度为40px的盒子：

.the_box{
width: 200px;
height: 40px;
line-height: 40px;
}

它简单，优雅，跨浏览器。如果文本长于200px，则此方法不起作用。

Answer 3

-3
投票

只需添加：display: table-cell;

Answer 4

放

style="valign:middle; vertical-align:middle;"

较新版本的IE将选择valign:middle并忽略vertical-align:middle。

所有其他浏览器，如Firefox，Chrome，Safari等将选择vertical-align:middle并忽略valign:middle。

Answer 5

我也有这个问题，我的同事创建了一个日历表。日历在Chrome，Firefox中很好地查看，但日期文字在每天的左上角被截取了一半。我删除了vertical-alignment属性并将其替换为position。见下文。

原始CSS：

.dayText {
    vertical-align: text-bottom;
}

我的CSS修复：

.dayText {
    position: relative;
    top: 10px;
    left: 0px;
    height: inherit; 
}

Answer 6

我遇到了类似的问题

我有以下内容

<div>
  <span> some text </span>
</div>

这一切都在表格的标题中。

通过在span中添加以下内容，我能够解决这个问题

<div>
  <span style="position: absolute; padding-top:1px;"> some text </span>
</div>