Newbie - alignment (again)

[Slick50]

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.

 

[Slick50]

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

slick

 

[dorayme]

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.

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

#mlp {

position:relative;
top: 1.2em;
font-size:180%;
}

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.

 

[Ben C]

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.

 

[Slick50]

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