Grow your CSS skills. Land your dream job.

What is Vertical Align?

Published by Chris Coyier

CSS has a property called vertical align. It can be a bit confusing when you first learn about it, so I thought we could go through it's use a little bit. The basic usage is like this:

img { 
  vertical-align: middle;
}

Notice in this usage case, it is being applied to the img element. Images are naturally inline elements, meaning they sit right inline with text if they are able to. But what does "sit inline" mean exactly? That is where vertical-align comes in.

The valid values are: baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, or a value in percentage.

The confusion, in my opinion, sets in when people try to use vertical-align on block level elements and get no results. If you have a small div inside a larger div and want to vertically center the smaller one within, vertical-align will not help you. Douglas Heriot has a good roundup of methods on In The Woods of ways to do this.

Baseline

The default value of vertical-align (if you declare nothing), is baseline. Images will line up with the text at the baseline of the text. Note that descenders on letters dip below the baseline. Images don't line up with the lowest point of the descenders, that isn't the baseline.

Middle

Perhaps the most common use for vertical-align is setting it to 'middle' on icon-size images. The results are generally consistent cross-browser:

The browser does the best job it can centering the pixel height of the text with the pixel height of the image:

Be aware that if the image is larger than the current font-size and line-height, it will push the following lines down if need be:

Text-bottom

Different from the baseline of type, is the bottom of text, where the descenders go down to. Images can be aligned with this depth as well:

Text-top

Opposite of text-bottom, is text-top, the highest point of the current font-size. You can align to this as well. Note that the current font, Georgia, probably has some ascenders taller than those represented here hence the small gap.

Top & Bottom

Top and Bottom work similarly to text-top and text-bottom, but they are not constrained by text but rather by anything at all on that line (like another image). So if there were two images on the same line, of different heights and both larger than the text on that line, their tops (or bottoms) would align regardless of that text size.

Sub & Super

These values stand for superscript and subscript, so elements aligned with these methods align themselves as such:

Vertical Align on Table Cells

Unlike images, table cells default to middle vertical alignment:

If you would rather see that text aligned to the top or bottom of the cell when it needs to stretch beyond the height that it needs, apply top or bottom vertical-alignment:

When using vertical-align on table cells, sticking with top, bottom, and middle is your best bet. None of the other values make a whole lot of sense anyway, and have unpredictable cross browser results. For example, setting a cell to text-bottom aligns the text to the bottom in IE 6, and to the top in Safari 4. Setting it to sub causes middle alignment in IE 6 and top in Safari 4.

Vertical Align and Inline-Block

Images, while technically inline level elements, behave more like inline-block elements. You can set their width and height and they obey that, unlike most inline elements.

Inline-block elements behave just like images with vertical align, so refer to the above. However, be aware that not all browsers treat inline-block elements the same way, so vertical-align may be the least of your worries. That's another story though....

Deprecated as an attribute

Occasionally you will see "valign" used on table cells to accomplish vertical alignment. e.g. <td valign=top>. It should be noted that this attribute is deprecated and should not be used. There really isn't any reason for it anyway as you can do it with CSS anyway.

Comments

  1. Permalink to comment#

    thanks so much ,great post

  2. This is, as you said in a previous posts, one of those moments that change the way you CSS.

    Many thanks for this great post

  3. probably the most overlooked property in CSS. Good break down!

  4. I just got through a layout where I needed to align some images within the text, and I was like “why isn’t this vertical align thing working??” now I see how it’s meant to be used :P I just used relative position last time :S

    Thanks for making this clear!

  5. Paperboy
    Permalink to comment#

    I’ve always used relative positioning to push down images a couple of pixels, will definitely try vertical-align next time. Thanks for the article!

  6. This is one of those things that I’ve used a lot years ago, when I was designing with tables, the difference is that it wasn’t a CSS style, but an inline property of the table, tr or td.

    And guess what, I forgot about them and I never used it in my last designs.

    Thanks for the reminder and the excellent explanation.

    Cheers

  7. Jillian
    Permalink to comment#

    When first learning CSS I was definitely a victim of trying to get this to work for block level elements, and haven’t really used it since figuring out that that didn’t work for those. Thanks for the clarification!

  8. Great post, the pictures make it crystal clear.

  9. Loved it. Thanks for the visual help with understanding this. Vertial aligns are not talked about enough.

  10. nice post, thanks a bunch Chris. Demystified a few things for me.

  11. Thanks Chris. This will come in handy for me.

  12. Brian Howard
    Permalink to comment#

    Thanks for spending the time to break this down for us. I haven’t seen anyone do this until now and it would have saved me a lot of trial and error. Now it is clearer. Keep up the great work on this site!

  13. Permalink to comment#

    I wrote a similar article in Feb. In case anyone likes Chinese version, here is the link:

    http://www.61dh.com/blog/2009/02/blog-post.html

    :-)

  14. Permalink to comment#

    Great post, I love these posts that just focus on one thing and fully explain it. In the couple of minutes it took me to read this, I learned a lot.

  15. You forgot to explain how setting a pixel length would work. Simply put, vertical-align: 0px; starts where vertical-align:bottom would be and goes up from there.

    In my experience, the most reliable properties is top and setting a pixel length.

    As for inline-block, there’s a simple fix to make sure inline-block behaves the same across all browsers.

    Check out my blog’s webdev section for more ways to use inline-block and vertical-alignment

  16. Very interesting. I can think of one site where I need to add this in a few places already. Man I love constantly learning new stuff.

  17. cssfreak
    Permalink to comment#

    Small things …..but these things help a lot when ur a beginner…….Thats why Chris is doing a good job by helping novices here…..

  18. Imran Khan
    Permalink to comment#

    very very informative..Thanks alot

  19. Permalink to comment#

    Nice post, I always end up using trial and error for this!

  20. Permalink to comment#

    Thanks!

  21. kaba
    Permalink to comment#

    Thanks for this thourough post! Really high quality research.

  22. Great post, thanks :)

  23. Permalink to comment#

    Hey Chris, I know it is a little different, but can you give an accurate way of aligning images above text when the image is a link. I know you can set margins on the left and right to auto and it should do it okay, but having to set the image as a block element so as it won’t shift up when clicked creates a link the whole way across the block element instead of just on the image.

    Get what I am saying?

  24. Hugo
    Permalink to comment#

    Nice post Chris, this is some hard-core CSS stuff!

  25. I did know this.. thanks

  26. Permalink to comment#

    how to vertically align contents in a div? Any solution other than top margin in % (bad for dynamic pages ) or using display table-cell (don’t work for IE)

  27. Cool, great stuff Chris!

    -FireDart

  28. bolo
    Permalink to comment#

    schweet brudda, loving these last couple posts breaking down this crap that I’ve never been arsed to really investigate myself!! thanks!

  29. Permalink to comment#

    Awesome, thanks a lot! I had always tried placing vertical align on the container the image and text were in.

  30. Permalink to comment#

    Thanks for the explanation, it’s always easier to understand with images.

  31. Stuart
    Permalink to comment#

    I don’t believe valign on TDs is deprecated, and if you’re concerned how your page displays unstyled it can still be useful.

  32. Permalink to comment#

    wow, fantastic post! thanks.

    btw, there is always room for deprecated tags in HTML newsletters. sheesh those things are a mess! they even use tables. ever done a post on how to code newsletters?

  33. Permalink to comment#

    Nice post! I have consider how “align-vertical” for a long time now, Thanks!

  34. savagecorp
    Permalink to comment#

    “. It should be noted that this attribute is deprecated and should not be used. There really isn’t any reason for it anyway as you can do it with CSS anyway.”

    Unless you’re building emails, and CSS doesn’t work, then it must be used.

  35. wow, you have explained it so well……thanks

  36. Thanks so much for this! I knew how to use that property for table cells but I had no idea it could be used on images. This will definitely see use on my website.

  37. Permalink to comment#

    great articles. you should write a book. it will become the text book in universities. : )

  38. This is really useful thanks!

  39. Evan
    Permalink to comment#

    Vertical align can also come in handy when working with checkbox and radio form elements. I use it to keep my labels and input elements on a center line.

  40. Moritz
    Permalink to comment#

    That was just what I need right now…
    Thanks for that

  41. Permalink to comment#

    the coolest of this property is % align, just use text-align:nn% and you will align your text with icons painlessly! negative laues are allowed as well and document is still pretty W3C valid :)

  42. Kathryn Wells
    Permalink to comment#

    Chris, you are the best! You are hands-down the best web design teacher I’ve ever had!

  43. I was confusing about vertical-align before. You make me clear it. Thanks a lot.

  44. Permalink to comment#

    Very clear y usefull!
    Thanks!

  45. Permalink to comment#

    Never really knew about this. Thanx a lot for this post.

  46. Permalink to comment#

    Excellent reading, very well explained.

  47. nice one …

  48. Permalink to comment#

    Q :

    Will this work if image or text link are wrapped as block element with float left/right? I often stumble into this case.

  49. THANK YOU!!!!!!!!!!!!!!!!!! I just tested out vertical-align:super it works like a charm on ie6 without the added line height space. I hate super scripts with a passion because of this! Thank you Chris you are indeed a knight in shinning css armor =D

  50. Thank u For Clean Explanation!!!

  51. This is way useful. :’3

  52. jermaine

    this came in very useful today thanks for the reminder

  53. asha
    Permalink to comment#

    When vertical-align is used along with underline, the underline shows as overline in firefox.Is there any replacement for vertical-align in css ?

  54. Weirdest thing. When setting a line-height to pixels instead of the typical notation, eg 1.6, vertical-alignment positioning in some browsers get all sorts of wacky. For me text-top and text-bottom alignment actually flipped on Chrome.

  55. Mike
    Permalink to comment#

    I was guilty of using it wrong. This article was very helpful.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".