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 d

Answer 1

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

margin-top: -50%;

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

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

Answer 5

position:absolute;
top:0px; 
margin:5px;

Solved my problem.

Answer 6

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.