Question

my question is more or less self-explanatory, I am trying to find a standard dynamic way to centralize an element in the y-axis, much like the:

margin: auto;

For the x-axis. Any ideas?

I am talking about the following piece of code, empty page, align one image in the center.

<div id="main" style="display: block;"> 
    <img style="margin: auto; display: block;" 
    src="http://www.example.com/img.jpg" />
</div>

Any help will be appreciated! 🙂

Answer 1

Just give up and use tables on this one, with vertical-align: middle. You can get away with just a single-row, single-cell table without feeling too guilty (I sleep like a baby about it). It’s not the most semantic thing in the world, but what would you rather maintain, a tiny one celled table, or figuring out the exact height and doing absolute positioning with negative margins?