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

css vertical-alignment
Ankur picture Ankur · May 29, 2009 · Viewed 235.9k times · Source

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

#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;
}

Answer

vanstee picture vanstee · May 29, 2009

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.

Related questions

How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More
How to align content of a div to the bottom

Say I have the following CSS and HTML code: The header section is fixed height, but the header content may change. I would like the content of the header to be vertically aligned to the bottom of the header section, …

Read More
How do I vertically align text in a div?

I am trying to find the most effective way to align text with a div. I have tried a few things and none seem to work.

Read More