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

Question

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

Answer 1

你尝试过弹性盒子吗？这就是我使用的，我没有遇到很多（如果有的话）兼容性问题，IE 可能有点挑剔，但它绝对支持它。

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

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

Answer 2

据说，IE8+支持vertical-align，但IE7-支持越野车。对于较旧的浏览器，您可能需要尝试将元素容器的 CSS 设置为 top: 50% 或 top: -50%。

Answer 3

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

例如，使用 200 像素宽度和 40 像素高度的框：

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

它简单、优雅且跨域浏览器。如果文本长度超过 200 像素，此方法将不起作用。

Answer 4

只需添加以下内容：
显示：表格单元格；

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 中显示效果很好，但每天左上角的日期文本被截断了一半。我删除了垂直对齐属性并将其替换为位置。见下文。

原始 CSS：

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

我的 CSS 修复：

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

Answer 7

我遇到了类似的问题

，我有以下问题

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

，这全部都在表的标题中。

我可以通过将以下内容添加到范围来解决这个问题

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