91

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;
}
Teun Zengerink
  • 4,277
  • 5
  • 30
  • 32
Ankur
  • 50,282
  • 110
  • 242
  • 312

10 Answers10

133

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.

  • 7
    Didn't work for me. The text gets always aligned center-vertically :( – AlikElzin-kilaka Jun 02 '15 at 07:23
  • Fast forward 14 years... this `vertical-align: top;` rule was the missing key to keep my MaterializeCSS breadcrumb links inside their container. I nest an additional `div.content` to control side gutter width and override the element height, which put the text placing of the `a.breadcrumb` out of whack. – florianm Apr 05 '23 at 04:11
29

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!

mechler
  • 431
  • 3
  • 3
18

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

Todd
  • 439
  • 5
  • 5
7

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.

Evan Meagher
  • 4,517
  • 21
  • 18
1

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.

RockAndRollBot
  • 26
  • 3
1

The all above not work for me, I have 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 by padding or margin will work, but that is last choise I prefer.

Ajay2707
  • 5,690
  • 6
  • 40
  • 58
0

PS.: I'm not a ux or frontend engineer

.make-it-valign-on-top {
    vertical-align: super;
    vertical-align: text-top;
    vertical-align: top;
}

<span class="make-it-valign-on-top">my text</span>
Duloren
  • 2,395
  • 1
  • 25
  • 36
-1
position:absolute;
top:0px; 
margin:5px;

Solved my problem.

CodeNoob
  • 345
  • 4
  • 17
-2

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

margin-top: -50%;
Mr. Doomsbuster
  • 1,324
  • 13
  • 11
-3

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.

Ankur
  • 50,282
  • 110
  • 242
  • 312
  • 14
    is certainly not old school, heaven forbid a website be made up of
    and exclusively.
     – Ryan Florence May 29 '09 at 04:52
  • I have limited web experience but whenever I try raw
    and only using tables to display information, I find it quite hard to KEEP everything inside the 'wrapper'
    for example. Rarely get that with tables, if something is in a cell it doesn't normally pop out!
     – Paul C Oct 20 '11 at 08:53
  • 1
    The crucial difference is due to the use of a *block* tag `

    ` vs. an inline tag ``.

     – Lawrence Dol Aug 01 '13 at 19:39
  • 1
    Set display as inline-block then only your vertical align will work in your case. – SƲmmēr Aƥ Nov 28 '13 at 10:06