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

Question

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

Answer 1

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

Answer 2

您尝试过flexbox吗？这就是我所使用的，而且我还没有很多（如果有的话）兼容性问题，IE可能有点挑剔，但它绝对支持。

要使项目居中，请将元素的容器设置为display: flex;，并添加align-items: center;以将元素在容器内垂直居中。您也可以使用justify-content: center;

将它们水平居中

您可以在这里看到它得到广泛支持：https://caniuse.com/#feat=flexbox

Answer 3

如果您想在框中放置一行文字，例如标题标题，请使用line-height

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

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

它简单，优雅，跨浏览器。如果文本长于200px，则此方法无效。

Answer 4

只需添加： display: table-cell;

Answer 5

放

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

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

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

Answer 6

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

原创CSS：

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

我的CSS修复：

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

Answer 7

我有类似的问题

我有以下

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

这一切都在一张桌子的标题中。

通过在span

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

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