You can vertically align the floating element in a way that works on IE 6+. It also does not need full tabular markup. This method is not entirely clean - it includes wrappers, and there are a few things you need to know, for example. if you have too much text pulling a container, but that's pretty good.
Short answer: You just need to apply display: table-cell to the element inside the moved element (table cells do not float) and use a backup with position: absolute and top for the old IE.
Long answer: Here is a jsfiddle showing the basics . The important material is generalized (with a conditional comment adding the .old-ie class):
.wrap { float: left; height: 100px; } .wrap2 { height: inherit; } .content { display: table-cell; height: inherit; vertical-align: middle; } .old-ie .wrap{ position: relative; } .old-ie .wrap2 { position: absolute; top: 50%; } .old-ie .content { position: relative; top: -50%; display: block; }
Here's a jsfiddle that intentionally throws out minor errors using this method. Please note how:
- In standard browsers, content that exceeds the height of the wrapper element stops centered and begins to descend the page. This is not a big problem (it probably looks better than crawling the page), and it can be avoided by avoiding too much content (note that if I did not miss something, overflow methods like
overflow: auto; do not look Work) - In old IE, the content element is not stretched to fill the available space - height is the height of the content, not the container.
These are fairly small limitations, but worth understanding.
Code and idea adapted from here
user568458 Aug 28 2018-11-11T00: 00Z
source share