Posted by Ben C on 12/15/06 12:15

On 2006-12-15, Slick50 <spam@yahoo.com> wrote:
> http://messiah.scojul.homedns.org
>
> Hi again. OK, so I think I understand why my page displays like it does, and
> it has only taken me three frustrating weeks. And I've been here before -
> but it is at this point where I work myself into circles.
>
> What I'd like to do now is horizontally center the SPAN, and vertically
> center it against the square.
>
> If someone could give me a code snippet and, more importantly, explain the
> effect of each one, I would be really grateful.

This is actually a bit tricky.

I did it like this (not tested in IE).

1. Remove float:right from #mlp, and make it vertical-align:middle and
line-height:75px.
2. Take away the margin-top:1em from #square and instead add
padding-top:1em to #header
3. Take away the margin-bottom:1em from #square, and instead add
margin-top:1em to #navbar.

#mlp will never be centered if it's floating. #header is already
text-align:center, so if we make #mlp a normal inline box, it will be
centered.

We get it half way up the square by aligning it to the middle of its
line box with vertical-align:middle and changing the line height to the
height that we already know the square is taking up. The problem is the
square was taking up 75px + 2em, which is tricky to resolve, so we solve
this by moving the 2em of margins onto the header's padding and the
navbar's top margin.

[Back to original message]