CSS vertical align text and images in div : 3 demos

The vertical-align property in CSS

The vertical-align CSS property will align the specified element vertically.

However, if you need to align the content vertically you may use a different technique like using the transform property with rotate value; I will show you how in this tutorial.

First, let us have a look at the vertical-align property syntax which is followed by online demos.

Syntax of vertical-align property

This is how the vertical align property can be used for elements:

vertical-align: baseline | text-top | text-bottom | text-bottom | bottom | middle | super | sub;

So, you may use any of the above values as using the CSS vertical-align property.

A demo of using vertical align property with middle value

In this demo, the text is aligned middle in a div element by using the vertical align property. The value used for the vertical-align is middle. Have a look:

See online demo and code

The CSS:

The markup:

You can see in the CSS section, the display property value is set as inline-block for the div element where it is applied.

A demo to understand different values for vertical align

In this demo, all values of the vertical-align property are used with images to illustrate how it works. In each div element, three different sizes of images are used and different values are assigned. You may better understand what does top, bottom, sub, super etc. actually means:

See online demo and code

By the image placements, you can see how different values, particularly, middle, top, bottom can be utilized to place the different piece of content. You may get the complete code from the demo page.

Credit for this example: chriscoyier

A demo of vertical aligning text in a div without vertical-align property

In this demo, the text is vertically aligned inside a div element. However, for aligning the text vertically, the transform property is used with translateY value, have a look:

See online demo and code

The CSS:

The markup:

You can see, using the translate with -50% value in transform  property made it aligned vertically middle, although, other properties played their role as well.