Why is there no legal way to vertically align elements?

Question

CSS is a great thing, but why isn't there an official “standard” way to vertically align divs and text inside other containers? I refuse to use tables in my layout because let me take a look at this, it's not 90 anymore!

I know that there are ways to make the content vertically centered using margins / padding or vertical alignment with the line height in place (which is not at all optimal). Using fields does not work if you have a div that has a specified height in the same container as the text content that you want to center vertically, since the text size is browser dependent, so it will not actually be centered in all browsers.

Does ANYBODY know whether or when it will be, a way to easily center content vertically with CSS only and not use tables in modern modern browsers?

Answer 1

Well, I suggest using a lightweight jQuery plugin that is flexible for all your needs. Here is an example:

(function ($) { // VERTICALLY ALIGN FUNCTION $.fn.vAlign = function() { return this.each(function(i){ var ah = $(this).height(); var ph = $(this).parent().height(); var mh = Math.ceil((ph-ah) / 2); $(this).css('margin-top', mh); }); }; })(jQuery); 

Then you just use the function on the selector you want:

 $('#example p').vAlign(); 

Answer 2

You might want to check out this article , which introduces the CSS method of only vertical centering children of any width and height.

Answer 3

You can try the following:

 <div style="display:table-cell; vertical-align:middle"> ... </div> 

I think you have listed all the other methods