Simplest vertical alignment we can think of

Question

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 ve

Answer 1

While it won't work in IE7, using pseudo element instead of 'spreader' should work in all major browsers: http://jsfiddle.net/mmxm4/6/

As for the IE <= 7, adding.htc behavior that creates an element with the after class wouldn't really be a crime, I suppose. At least, no more than using PIE.

Here's the code (tested over several projects):

<PUBLIC:COMPONENT lightWeight="true">
<!-- saved from url=(0014)about:internet -->

    <PUBLIC:ATTACH EVENT="oncontentready" FOR="element" ONEVENT="append_after()" />
    <PUBLIC:ATTACH EVENT="ondocumentload" FOR="element" ONEVENT="append_after()" />

    <script type="text/javascript">
        function append_after() {
            if (!this.after) {
                var el = element,
                    doc = el.document,
                    aft_el = doc.createElement('div');

                this.after = "true";
                aft_el.setAttribute('class', 'after');
                this.appendChild(aft_el);
                aft_el.outerHTML = aft_el.outerHTML;

                this.runtimeStyle.behavior = "none";
            }
        }
    </script>

</PUBLIC:COMPONENT>

If you are using conditional classes, just add something like this:

.lte-ie7 .parent {
  behavior: url(/path/from/the/site/root/after.htc);
}

And then, for both inline-block elements, add display: inline; zoom: 1; to the styles. The more elegant solution, though, will be using the "Cross-browser inline-block" technique: define a global class for your inline blocks and use it wherever you need it:

.inline-block {
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: top;
}

.lte-ie7 .inline-block {
    display: inline;
    zoom: 1;
}

Answer 2

If I need IE7 support, I tend to go for the "display: inline-block with an extra element" method. This does work in IE7 with a small change, here's an example.

If I don't need IE7 support, I usually use the display: table-cell method.

Sometimes, I can't use the display: table-cell method, typically when I need to use absolutely position something at the bottom of the element with display: table-cell. position: relative doesn't work on table cells, at least in Firefox. In those cases, I use the display: inline-block method, except that the "extra element" is inserted via :before, which keeps the HTML clean.

Answer 3

Not the best way to do it, but you could use two divs to force the pink box to always be centered, with one "pushing" the other:

http://jsfiddle.net/EjV4V/25/

This approach should work with IE7, though you would always have to use fixed margins.

Answer 4

The CSS3 solution to this is box-align

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-pack

But it isn't supported by some browsers so I would use some jQuery plugin like:

http://www.nealgrosskopf.com/tech/thread.php?pid=37

Answer 5

If you know the height of what you are centering you can use absolutely position the box 50% from the top and then use a negative margin half the height of the box to center it. It's annoyingly complex getting it to work it ie7 but it does work.

http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/

Example:

.center {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%; 
    margin-left: -150px;
    margin-top: -150px;
}