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

Posted 2023-03-04

【中文标题】如何跨浏览器垂直对齐元素？

【英文标题】：How to vertical align elements cross-browser?

【发布时间】：2011-05-24 23:19:19

【问题描述】：

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

【问题讨论】：

什么版本的IE？能贴出相关的 html 和 CSS 代码吗？

.login_sign_up_text_box_td 字体：Arial，Helvetica，无衬线；字体大小：18px；颜色：#000;垂直对齐：中间；高度：40px；宽度：200px；我正在使用 IE 7

您的样式表中是否还有其他与此属性冲突的 CSS 属性？

如果没有完整的标记或链接，我们所说的一切都只是一个疯狂的猜测。

【参考方案1】：

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

【讨论】：

如果路过的投票者能发表评论并解释自己，那就太好了。

【参考方案2】：

如果你想在你的框中放置一个单行文本，例如标题标题，而不是使用line-height

例如一个 200px 宽和 40px 高的盒子：

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

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

【参考方案3】：

放

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

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

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

【参考方案4】：

我也遇到过类似的问题

我有以下

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

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

我能够通过将以下内容添加到跨度来解决此问题

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

【参考方案5】：

我的同事创建了一个日历表，我也遇到了这个问题。日历在 Chrome、Firefox 中很好看，但是每天左上角的日期文本被截掉一半。我删除了垂直对齐属性并将其替换为位置。见下文。

原始 CSS：

.dayText 
    vertical-align: text-bottom;

我的 CSS 修复：

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

【参考方案6】：

只需添加以下内容： display: table-cell;

【参考方案7】：

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

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

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