Databases
StackOverflow2013
Postsdbo
POSimplest vertical alignment we can think of
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSimplest vertical alignment we can think of
    text
    copied!<p>To sum it up, there are few approaches to align content vertically in container. These are main approaches (if you now some completely different way to do it, it would be very generous of you to provide example - I will incorporate it here)</p> <ol> <li>using <code>position</code> and <code>transform</code> properties - <a href="http://jsfiddle.net/EjV4V/3/" rel="nofollow">http://jsfiddle.net/EjV4V/3/</a> This one is nice, but as to me, is a little bit overkill, especially if we consider rendering optimization issues. Will work in all modern browsers, won't work in IE7.</li> <li>using <code>display: inline-block</code> property with one additional auxiliary block - <a href="http://jsfiddle.net/mmxm4/3/" rel="nofollow">http://jsfiddle.net/mmxm4/3/</a>. Because of using additional DOM element don't think this approach is good. Won't work in IE7. It worth to mention also (thanks @nclenorton for mentioning this), that we can use <code>:before</code> or <code>:after</code> generated content. But, once again - <a href="http://caniuse.com/#search=%3abefore" rel="nofollow">not in IE7</a>.</li> <li>using <code>display: table</code> and <code>display: table-cell</code> properties - <a href="http://jsfiddle.net/Ppk3p/2/" rel="nofollow">http://jsfiddle.net/Ppk3p/2/</a>. Sometimes this approach is neat, sometimes not. Note that, contrary to other example provided there is a problem with child cell width. Any way, won't work in IE7.</li> <li><p>using <code>display: box</code> - <a href="http://jsfiddle.net/9Phgg/9/" rel="nofollow">http://jsfiddle.net/9Phgg/9/</a> - this is the most sexy way to handle things, but as all we know, spec is not 100% completed. Moreover, Opera does not support flex box. And yes, of course, don't even think about trying something like this in IE7.</p> <p>My question is: "Regarding the fact that all of abovementioned approaches will fail in IE7, what is the most general, elegant, simple and right way to center elements vertically in all modern browsers <strong>and</strong> IE7?".</p> <p>I have a strong feeling that, helas, though it is year 2012, using table layout is still the answer. I've seen some exotic approaches, using, for example <code>position: absolute</code> or even javascript expressions, but this is far from elegant and simple. </p></li> </ol> <p>Seasoned html-developers, correct me if I'm wrong.</p> <p><strong>UPD:</strong> Actually, there is one more approach, but I find it radically wrong and unsuable for many reasons. But it worth to mention. Anything in button is centered vertically by default, so behold - <a href="http://jsfiddle.net/s5nz4/3/" rel="nofollow">http://jsfiddle.net/s5nz4/3/</a>. This will work in IE7, but we are all adult people here, I hope, to understand that this is inappropriate )))</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload