Question

I am new to the world of coding as well as CSS and recently came across the property vertical-align. Having read a number of articles on what it is, I am still clueless on what it is for and when do you use it?

My understanding is that it is used for inline elements such as text, images, etc as well as text or other inline elements in a table. They cannot be used for block element such as div, h1, etc.

If my understanding is right, apart from aligning text vertically to say an image or using subscript or superscript, what other purpose does it serve?

Answer 1

• It’s always worth reading the specs if you want to learn about a specific property:
  http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

• A common use case is vertical centering (in combination with display: table-cell):

  http://jsfiddle.net/7eTb2/

  div {
      background: #ccc;
      width: 200px;
      height: 300px;
      padding: 5px;
  
      display: table-cell;
      vertical-align: middle
  }
  

  It’s somewhat difficult to vertically center without using this technique.

• Another common use case is when it comes to elements that are inline or inline-block.
  See here for examples of what happens with different vertical-align values:
  http://www.brunildo.org/test/inline-block.html

• Another good link to read: http://css-tricks.com/what-is-vertical-align/

However, it’s real use is getting me upvotes, see:

• https://stackoverflow.com/search?tab=votes&q=user%3a405015%20%22vertical-align%3a%20top%22

🙂