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

Question

我正在使用vertical-align: middle属性进行vertical-align: middle它在 Chrome 中有效，但在 IE 中无效。

Answer 1

Supposedly , IE8+ supports vertical-align but 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% .

Answer 2

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.

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;

You can see it's widely supported here: https://caniuse.com/#feat=flexbox

Answer 3

只需添加： display: table-cell;

Answer 4

If you want to place a one line text, for example a header title in your box, than use line-height

For example with a 200px width and 40px height box:

.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.

Answer 5

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.

Original CSS:

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

My CSS Fix:

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

Answer 6

Put

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

Newer versions of IE will pick valign:middle and ignore vertical-align:middle .

All other browsers like Firefox, Chrome, Safari etc. will pick vertical-align:middle and ignore valign:middle .

Answer 7

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>