|
|
Posted by Ed Jay on 10/04/06 11:24
Els <els.aNOSPAM@tiscali.nl> wrote:
>Ed Jay wrote:
>
>> Els <els.aNOSPAM@tiscali.nl> wrote:
>>
>>>Ed Jay wrote:
>>>
>>>> Mark Parnell <webmaster@clarkecomputers.com.au> wrote:
>>>>
>>>>>Previously in alt.html, Ed Jay <edMbj@aes-intl.com> said:
>>>>>
>>>>>> I'm having a heck of a time figuring out how to center text or boxes.
>>>>>
>>>>>http://dorward.me.uk/www/centre/
>>>>
>>>> Thanks, Mark. That was a great help.
>>>>
>>>> Allow me to impose and ask another question. I'm trying to center a box
>>>> with text aligned both left and right. Example:
>>>> Test1 Test2
>>>>
>>>> I defined a simple box as:
>>>>
>>>> .menu {
>>>> border: 1px solid black;
>>>> margin-left: auto;
>>>> margin-right: auto;
>>>> width: 300px;
>>>> }
>>>>
>>>> The code on my page is:
>>>>
>>>> <div class=menu style="text-align: left;">Test1<div
>>>> style="text-align:right;">Test2</div></div>
>>>>
>>>> The result is:
>>>>
>>>> Test1
>>>> Test2
>>>>
>>>> Why?
>>>
>>>Because ...
>>>Well, add a visible border to each div, and you will know :-)
>>>
>>>To make it work, you should float the first one left, and give it 50%
>>>width (probably a bit less to make it work in other browsers too), and
>>>give the second one a left margin of 50%.
>>
>> Thank you again. I'm going to have to translate what you've said into code
>> I understand, but it's 1:30AM and I can't focus my eyes any longer. It's
>> obviously past my bedtime. :-)
>
>You're in Australia? (or Japan?) Go to bed! The European crew will
>take over from here, your turn will come again ;-)
Near Los Angeles.
>
>Sleep well :-)
I had nightmares about CSS. :-))
OK, I came up with the following 'solution' that does what I want, a
centered line of two single words--one to the left and one to the right,
but it seems terribly clumsy. Can it be simplified?
<div style=" margin-left: auto; margin-right: auto; width: 300px;
text-align: center;"><div style="text-align: left; width: 40%; float:
left;">Test1</div><div style="text-align: right;"><div
style="text-align:right; width:40%;">Test2</div></div></div>
Ed Jay (remove M to respond)
Navigation:
[Reply to this message]
|