CSS usually does a great job of separating content in the form of HTML from its presentation, yet some of the most common layout, positioning, and styling use cases are unintuitive or require changes to the markup like wrapper elements. This is intended to serve as a reference guide for those both those well-versed in crafting CSS as well as those who have never came across these techniques before.

While this guide may appeal to people of various skill levels, I make the assumption that you understand the syntax of CSS well enough to declare rules and target different types of elements based on your own HTML in place.

As a preface, some of these tasks are more straightforward with standards-compliant browsers and are a non-issue, while some of these solutions forego backwards compatibility for the sake of simplicity while still serving the majority of browsers. Notable cases of either extreme will be noted where possible.

CSS Alignment

There a number of ways you might think of alignment: vertical and horizontal of block content areas as well as text and inline content.

While vertical and horizontal alignment are nearly identical in the natural world, advanced and intermediate CSS writers alike will tell you that web content is much more naturally suited for horizontal positioning and alignment.

Thus, solutions for horizontal and vertical alignment, even for the same types of content, often require completely different solutions. If CSS was redesigned from the ground up today, perhaps this would be less of an issue. In fact, many people familiar with CSS accept these as quirks, but even the pros can become rusty or mix up techniques.

Aligning Text Content Horizontally With CSS

text-align: left;
text-align: right;
text-align: center;
text-align: justify;

These declarations are straightforward and natural in CSS, and work as you would expect usually. They operate like the equivalents common to word/text processors.

A rule using the text-align property does not only control the alignment of text, but as alluded above, other inline (and inline-block) content as well, including images (more on images later).

Aligning Text Content Vertically With CSS

It is only natural to want to handle vertical alignment of text after mastering horizontal alignment so easily. Unfortunately, vertical alignment of text is much less straightforward. In fact, your solutions vary based on the nature of your text: single-line versus multiple lines of text.

The solution for a single line of text is much more straightforward: find the height of its container and set your line-height equal to the container height:

line-height: 32px;

The above declaration would center a single line of text placed in a container that is 32 pixels tall. Obviously you would want to change the value accordingly.

Given that you have multiple lines of text, you face a stronger challenge. CSS provides you the aptly-named vertical-align property, but unfortunately, it does not have the intended effect in most situations. To properly use the vertical-align property, either use it with a table (targeting either a tr or td/th tag with your rule), or if you cannot or do not want to use a table, using a more complicated technique.

CSS vertical-align with using a table

CSS:

td {
  vertical-align: middle;
}

HTML:

<table>
  <tr>
    <td>First cell</td>
    <td>Second Cell</td>
  </tr>
</table>

While the above example does not have lengthy text content, it would serve to allow vertical alignment of text content in each row’s cells. You may want to make your selectors in your rules less generic (in fact, you almost certainly will, but it illustrates the point).

CSS vertical-align without using any tables

If you cannot or choose not to use a table in your HTML, vertical alignment for multiple lines involves emulating a table. The rules and example markup for this technique is more involved, and may require you to include extra containing elements if your HTML is not deeply nested enough, but it may be your only choice given the circumstances.

CSS:

.container {
  display: table;
}
.container .row {
  display: table-row;
  vertical-align: middle;
}
.container .row > div {
  display: table-cell;
}

HTML:

<section class="container">
  <div class="row">
    <div class="left">First cell</div>
    <div class="right">Second Cell</div>
  </div>
</section>

While the code above may make some assumptions about other styling choices, it should be similar enough that you can relate to it. As mentioned before, it is important that you wrap your content in extra containing elements if your HTML structure is too flat and the targeted section is less than 3 levels deep.

The technique emulates a table by setting the display property of each of the levels in the structure to behave like the corresponding parts of an HTML table, and with that in place, vertical-align works just the same as it would with a real table, without the need for the underlying HTML to actually contain any tables itself.

Among the possible vertical-align values (alphabetical order): baseline, bottom, middle, sub, super, text-bottom, text-top, and top.

Conclusion…for now

This hardly scratches the surface of CSS alignment, only covering text for now, but hopefully it is useful to you. My examples are simplified, but I hope that makes it easy to understand. More updates to come, so stay posted!