Vertical alignment in divs

Based on cssing.org.ua .

For vertical alignment in blocks, the W3C developers created a wonderful display property : table-cell; which allows you to force an element to appear as a table cell. At the same time adding vertical-align: middle; We would have done a great job if it were not for Internet Explorer, which doesn’t want to support the display property : table-cell; .


Below is a sample code that will help IE display the contents of the block in the middle, just like in other browsers:
')
HTML:

 <div class = "container">
   <p class = "middled"> Vertically centered element </ p>
 </ div>

CSS:

 .container {
   display: table-cell;
   vertical-align: middle;
 }
 .middled {
   margin-top: expression ((parentNode.offsetHeight - this.offsetHeight) <0? "0": (parentNode.offsetHeight - this.offsetHeight) / 2 + "px");
 }

To tame IE, we used expression . Expression performs the following functions: it calculates the height of the parent and child elements, then their difference divides in half, and we use the resulting number as the value of the upper indent for the child element. Expression is best removed in a separate css file using conditional comments.

The difference between this method and the one described in the article on cssing.org.ua is that it can be used for classes, while the method with cssing.org.ua is only suitable for identifiers.

I hope someone is useful.