Newbie - alignment (again)

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

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.

Re: Newbie - alignment (again)

What I meant was vertically align against the box, not "vertically center",
in case I look like a total idiot.


Re: Newbie - alignment (again)

Quoted text here. Click to load it

For least change to your efforts, and imagining the sort of thing
you want, try:

#mlp {

top: 1.2em;

instead of what you have. You need to remember that if the user
changes font size, all calculations re your alignments are not
going to be quite what you imagine. Your image is fixed size but
the text could be way bigger than the height of it.

Actually, your logo is as perfect as possible for a technique
whereby it will scale if you css the width and height to ems,
requires some calculations... if you want to know more, ask.


Re: Newbie - alignment (again)

Quoted text here. Click to load it

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
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

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.

Re: Newbie - alignment (again)

Thanks a lot, Ben. That was a really useful reply. It worked well.

Quoted text here. Click to load it

Site Timeline