centering text 2

[jimmyshoes]

<div style="border:#000000 1px solid;background-color:#00FF00;padding:20px;">Hello</div>

The above code creates a green box with a border and Hello is centered vertically.

My question is can I assume that text will always be centered vertically in a div. Also, If I want to position the text at the top of the div how do I do it.Adding vertical-align:top
to my style does not have any effect

 

[feherke]

Hi

There is no proper alignment. That [tt]div[/tt] is just as high as its content requires.

While you gave it equal amount of [tt]padding[/tt] all around, the content appears in the middle. So if you want the content closer to the [tt]div[/tt]'s top edge, give it smaller [tt]padding-top[/tt].

Feherke.

http://rootshell.be/~feherke/

 

[Vragabond]

No. Text in a div is always vertically centred to the top. In your case, it is probably the fact that it is only one line of text in addition to a 20px padding on each side that contributes to the effect of it looking like it is centred vertically. In fact, it starts at the top right after the applied borders and padding. If you added a fixed height to the div, you would've seen the result.

In that respect, you do not need to do anything to have the text aligned to the top. You would however have quite a bit of problems if you wanted to align it anywhere else.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[jimmyshoes]

Thanks for your reply. Just one thing though, do you mean that the text starts at the top left rather than the top right.
If I alter my code to the following, the text is to the left

<div style="border:#000000 1px solid;background-color:#00FF00">Hello</div>

 

[Vragabond]

When I used the phrase "right after" I meant it to mean immediately after. Being joined with top at the beginning, I can see how you could have misunderstood it. Of course, unless you change the direction of the text, it will start at the top left corner of an element.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[jimmyshoes]

Thanks for your help...very informative