|
|
Posted by Slick50 on 12/18/06 01:41
Thanks a lot, Ben. That was a really useful reply. It worked well.
"Ben C" <spamspam@spam.eggs> wrote in message
news:slrneo54cm.nd.spamspam@bowser.marioworld...
> 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.
Navigation:
[Reply to this message]
|