Html 如何跨浏览器垂直对齐元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4434265/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertical align elements cross-browser?
提问by subash
I am doing vertical alignment using vertical-align: middleproperty its working in Chrome but not in IE.
我正在使用vertical-align: middle它在 Chrome 中工作但不在 IE 中工作的属性进行垂直对齐。
回答by Donald Taylor
Supposedly, IE8+ supports vertical-alignbut IE7- support is buggy. For older browsers, you may want to try setting the element's container's CSS to top: 50%or top: -50%.
据说，IE8+ 支持，vertical-align但 IE7- 支持有问题。对于较旧的浏览器，您可能需要尝试将元素的容器的 CSS 设置为top: 50%或top: -50%。
回答by Sean Mooney
Have you tried flexbox? It's what I use and I haven't had many (if any) compatibility issues, IE can be a little finicky but it definitely supports it.
你试过 flexbox 吗？这是我使用的，我没有遇到很多（如果有的话）兼容性问题，IE 可能有点挑剔，但它绝对支持它。
To center items, you set the container of the elements to display: flex;and also add align-items: center;to center them vertically within the container. You can also center them horizontally with justify-content: center;
要居中项目，您可以将元素的容器设置为display: flex;并添加align-items: center;以使其在容器内垂直居中。您也可以将它们水平居中justify-content: center;
You can see it's widely supported here: https://caniuse.com/#feat=flexbox
你可以在这里看到它得到了广泛的支持：https: //caniuse.com/#feat=flexbox
回答by Vla
Simply add this:
display: table-cell;
只需添加以下内容：
display: table-cell;
回答by wintercounter
If you want to place a one line text, for example a header title in your box, than use line-height
如果你想在你的框中放置一行文本，例如标题标题，请使用 line-height
For example with a 200px width and 40px height box:
例如宽度为 200 像素、高度为 40 像素的框：
.the_box{
width: 200px;
height: 40px;
line-height: 40px;
}
It's easy, elegant, and cross-browser. If you have longer text than 200px, this method will not work.
它简单、优雅且跨浏览器。如果您的文本长度超过 200 像素，则此方法将不起作用。
回答by aman.kejriwal
Put
放
style="valign:middle; vertical-align:middle;"
Newer versions of IE will pick valign:middleand ignore vertical-align:middle.
较新版本的 IE 将选择valign:middle并忽略vertical-align:middle.
All other browsers like Firefox, Chrome, Safari etc. will pick vertical-align:middleand ignore valign:middle.
所有其他浏览器，如 Firefox、Chrome、Safari 等，都会选择vertical-align:middle并忽略valign:middle.
回答by Rob Watt
I also had this problem, with a calendar table a colleague of mine created. The Calendar viewed nicely in Chrome, Firefox, but the date text was half cut off in the top left corner of each day. I removed the vertical-alignment property and replaced it with position. See below.
我也有这个问题，我的一个同事创建了一个日历表。日历在 Chrome 和 Firefox 中很好地查看，但日期文本在每天的左上角被截断了一半。我删除了垂直对齐属性并将其替换为位置。见下文。
Original CSS:
原始CSS：
.dayText {
vertical-align: text-bottom;
}
My CSS Fix:
我的 CSS 修复：
.dayText {
position: relative;
top: 10px;
left: 0px;
height: inherit;
}
回答by nate_weldon
I had a similar problem
我有一个类似的问题
I had the following
我有以下
<div>
<span> some text </span>
</div>
This was all in a header of a table.
这一切都在表的标题中。
I was able to get around this issue by adding the following to the span
我能够通过将以下内容添加到跨度来解决这个问题
<div>
<span style="position: absolute; padding-top:1px;"> some text </span>
</div>
