Question

I’m trying to vertically centre my introWrap container using the :after pseudo-element method (as described at the end of this article). I’ve always applied this method without any problems, but I can’t for my life seem to understand why it doesn’t work in this case (http://jsfiddle.net/4yfru/2/).

Right now the introWrap div is at the top, whilst it should really be in the center on the vertical axis. I tried replacing the :after pseudo-element with a span, and it worked perfectly. Something’s fishy is going on here and I don’t know what.

Could any kind soul please help me out here?

Answer 1

You have the wrong element with the :after applied. You need to apply it to the “wrapping” element, so like this:

#intro:after{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}