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  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

User · Accepted Answer

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.

User · Answer

something like    position relative    top -5px    just on the inline element itself works for me  Have to play with the top to get it centered vertically

User · Answer

vertical-align is only supposed to work on elements that are rendered as inline    lt span gt  is rendered as inline by default  but not all elements are   The paragraph block element   lt p gt   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

User · Answer

You can use contextual selectors and move the vertical-align there  This would work with the p tag  then  Take this snippet below as an example  Any p tags within your class will respect the vertical-align control    header selecttxt       font-family  Arial      font-size  12px      font-weight  bold      header selecttxt p       vertical-align  text-top      You could also keep the vertical-align in both sections so that other  inline elements would use this

User · Answer

The problem I had can t be made out from the info I have provided    I had the text enclosed in old school  lt p gt  tags     I changed the  lt p gt  to  lt span gt  and it works fine

User · Answer

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

User · Answer

position absolute  top 0px   margin 5px    Solved my problem

User · Answer

The all above not work for me  I have just checked this and its work       vertical-align  super      lt div id  lbk mng rdooption  style  float  left   gt        lt span class  bold  style  vertical-align  super   gt View  lt  span gt    lt  div gt    I know by padding or margin will work  but that is last choise I prefer

User · Answer

You can use margin-top  -50  to move the text all the way to the top of the div   margin-top  -50

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

Examples related to css

Examples related to vertical-alignment