What is the vertical alignment used in CSS?

Question

I am new to the world of coding as well as CSS and have recently stumbled upon the vertical-align property. After reading a series of articles about what it is, I still don't know what it is for and when you use it?

I understand 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 a block element such as div, h1, etc.

If my understanding is correct, besides aligning the text vertically to say the image or using an index or a superscript, what other purpose does this serve?

Answer 1

• It is always worth reading the specifications if you want to know 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 is somewhat difficult to vertically center without using this technique.

• Another common use case is for 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 read link: http://css-tricks.com/what-is-vertical-align/

However, this real use gives me upvotes, see:

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

:)

Answer 2

He used vertical alignment elements. Block level elements ignore this property. So your understanding is correct.

This blog post provides some vertical alignment reference with some examples. It is mainly used to vertically position an image in a line of text. Or replace the valign attribute with tablecells.

So it seems you understand it completely correctly. For more information on vertical alignment properties, see w3schools .

Just to be clear; do not try to use vertical alignment to position a block level element such as a div. It will not work, as you already mentioned, for inline elements, such as images in a line of text. Using display: table-cell; and vertical alignment on the element is a hack, please use other CSS methods to vertically align the material in the div if possible.

Answer 3

vertically, according to W3C and how most (tm) interpret it, it only uses or takes effect on elements that are table cells ( <td> ), and on some browsers elements with the display: table-cell declaration.

The rest of the time, browsers are mostly ignored.

Answer 4

Others were mostly correct regarding vertical alignment. The reality is that it works, not what you think. This is for inline elements, not blocks.

In this case, the violin is worth a thousand words. :)

http://jsfiddle.net/JJfuj/

Answer 5

Vertical alignment is what it looks like. It aligns the element vertically inside the parent object; however, not all browsers interpret it the same way.

Below is more detailed information on the available parameter values.