Skip to main content
CSS is fun and cool and I like it.

Deep dive CSS: font metrics, line-height and 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.… Read article “Centering in CSS: A Complete Guide”



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
Read article “vertical-align”

Absolute Center (Vertical & Horizontal) an Image

CSS background-image Technique:

html { 
   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 {
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
#wrapper td {
   vertical-align: middle;
   text-align: center;
<table id="wrapper">
    <td><img src="logo.png" alt="" /></td>
Read article “Absolute Center (Vertical & Horizontal) an Image”

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 … Read article “Vertically Center Multi-Lined Text”


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 help explain what it is for and some use cases.

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 … Read article “What is Vertical Align?”