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

Question

I want to align some text at the top of the div. It seems that vertical-align: text-top; should do the trick, but it doesn't work. Other things I did, like putting divs in columns and displaying a dashed border (so that I can see where the top of the div is located), everything works 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 1

The vertical-align attribute is for inline elements only. It will not affect block level elements such as divs. In addition, text-to-text moves text only to the top of the current font size. If you want to vertically align the inline element to the beginning, just use this.

 vertical-align: top; 

The paragraph tag is not out of date. In addition, the vertical alignment attribute applied to the span element may not display as intended in some mozilla browsers.

Answer 2

vertical-align should only work on elements that display as inline . <span> appears as inline by default, but not all elements. The paragraph block element <p> appears by default as a block. Table rendering types (e.g. table-cell ) allow you to use vertical alignment.

Some browsers may allow you to use the CSS vertical-align property for elements such as a paragraph block, but they should not. The text indicated as a paragraph must be filled out in written language, or the markup is incorrect, and one of several other parameters should be used instead.

Hope this helps!

Answer 3

something like

  position:relative; top:-5px; 

only for the inline element itself works for me. You have to play with the top to get it centered vertically ...

Answer 4

You can apply position: relative; to the div, and then position: absolute; top: 0; position: absolute; top: 0; to a paragraph or range within it containing text.

Answer 5

You can use contextual selectors and move vertically. Then it will work with the p tag. Below is an example below. Any p-tags in your class will respect the vertical control:

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

You can also keep the vertical alignment in both sections to use other inline elements.

Answer 6

All of the above does not work for me, I just checked this and its work:

vertical-align: super;

  <div id="lbk_mng_rdooption" style="float: left;"> <span class="bold" style="vertical-align: super;">View:</span> </div> 

I know that filling or margin will work, but this is the last choice that I prefer.

Answer 7

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

Solved my problem.

Answer 8

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

 margin-top: -50%; 

Answer 9

The problem I cannot do is from the information I provided:

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

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