Why is vertical-align:text-top; not working in CSS

Question

I want to align some text to the top of a div. It seems that vertical-align: text-top; should do the trick. It doesn't seem to work. The other things that I have done, such as putting the divs into columns and displaying a dashed borer (so I can see where the top of the div is) all work fine.

<style>
#header_p { 
font-family: Arial;
font-size: 32px;
font-weight: bold;

}
#header_selecttxt {
 font-family: Arial;
font-size: 12px;
font-weight: bold;
vertical-align:text-top;
}

#header_div_left { 
float:left; 
width:50%;
border: dashed;
vertical-align:top;
}
#header_div_right { 
margin-left:50%;
width:50%;
border: dashed;}  
</style>

Answer 1

The vertical-align attribute is for inline elements only. It will have no effect on block level elements, like a div. Also text-top only moves the text to the top of the current font size. If you would like to vertically align an inline element to the top just use this.

vertical-align: top;

The paragraph tag is not outdated. Also, the vertical-align attribute applied to a span element may not display as intended in some mozilla browsers.

Answer 2

The problem I had can't be made out from the info I have provided:

• I had the text enclosed in old school <p> tags.

I changed the <p> to <span> and it works fine.

Answer 3

You could apply position: relative; to the div and then position: absolute; top: 0; to a paragraph or span inside of it containing the text.

Answer 4

vertical-align is only supposed to work on elements that are rendered as inline. <span> is rendered as inline by default, but not all elements are. The paragraph block element, <p>, is rendered as a block by default. Table render types (e.g. table-cell) will allow you to use vertical-align as well.

Some browsers may allow you to use the vertical-align CSS property on items such as the paragraph block, but they are not supposed to. Text denoted as a paragraph should be filled with written-language content or the mark-up is incorrect and should be using one of a number of other options instead.

I hope this helps!

Answer 5

yep, i was having a hard time with the alignment at the top in a div. i changed the p tag

to span tag and VOILA! works great! thanks for the helps!