vertical-align

Centering in CSS: A Complete Guide

Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to do, but in that there so many different ways of doing it, depending on the situation, it's hard to know which to reach for.

So let's make it a decision tree and hopefully make it easier.

(more…)

vertical-align

The vertical-align property in CSS controls how elements set next to each other on a line are lined up.

img {
  vertical-align: middle;
}

In order for this to work, the elements need to be set along a baseline. As in, inline (e.g. <span>, <img>) or inline-block (e.g. as set by the display property) elements.

The valid values are:

  • baseline - This is the default value.
  • top - Align the top of the element and its descendants with the top of the entire line.
  • bottom - Align the bottom of the element and its descendants with the bottom of the entire line.
  • middle - Aligns the middle of the element with the middle of lowercase letters in the parent.
  • text-top - Aligns the top of the element with the top of the parent element's font
  • text-bottom - Aligns the bottom of the element with the bottom of the parent element's font.
  • sub - Aligns the baseline of the element with the subscript-baseline of its parent. Like where a <sub> would sit.
  • super - Aligns the baseline of the element with the superscript-baseline of its parent. Like where a <sup> would sit.
  • length - Aligns the baseline of the element at the given length above the baseline of its parent. (e.g. px, %, em, rem, etc.)

You can see examples of each here:

Check out this Pen!

A common use case is lining up an avatar with a username. To get them centered along a line, you'd use vertical-align: middle;. Although note that it centers the text according to its tallest ascender and deepest descender.

Each element lines up according to the line you've set, which doesn't change from element to element. So, you can mix-and-match which elements have which value - the elements don't affect each other.

Note that vertical-align is useful on table-cell elements as well, aligning the content within them. Sticking to top, middle, and bottom is the best bet though, as the other values have inconsistent cross-browser results.

More Information

  • What is vertical-align?
  • This property does not allow you to "vertically center" an element within another element. Flexbox is more of the proper tool there. However, there is a trick involving a pseudo "ghost" element that can allow this to work.
  • MDN

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any Any Any 4+ 4+ Any Any
Fairly consistent across browsers old and new, assuming the font is the same.

Note that some replace elements (e.g. <textarea>) are inline, but their baseline isn't specified, so behavior may vary from browser to browser.

Absolute Center (Vertical & Horizontal) an Image

CSS background-image Technique:

html { 
   width:100%; 
   height:100%; 
   background:url(logo.png) center center no-repeat;
}

CSS + Inline Image Technique:

img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 500px;
   height: 500px;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */
}

Table technique:

html, body, #wrapper {
   height:100%;
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
}
#wrapper td {
   vertical-align: middle;
   text-align: center;
}
<table id="wrapper">
  <tr>
    <td><img src="logo.png" alt="" /></td>
  </tr>
</table>

Vertically Center Multi-Lined Text

If you only have a single word or a single line of text, there is a clever way to vertically center it in a block with CSS. You set the line-height of that text to be equal to the height of the box. Works great, but is a major fail if that text needs to wrap.

A "speech bubble" is a classic example of somewhere we might want text to be centered both horizontally and vertically and be adaptable to multiple lines. There is a little, fairly simple CSS trick for this, using CSS tables. Here is the outcome:

View DemoDownload Files

(more…)

What is Vertical Align?

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.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag