Vertical Alignment

Many people have written about vertical alignment in CSS before. I’m not going to present some brand new technology to help with it, but explain the pros and cons to a few techniques, so hopefully you’ll find one that’s suitable for whatever you’re working in.

Note: There are other ways to vertically align in CSS. A lot of others don’t degrade gracefully when the vertically centred content is taller than its container.

Flexbox

We’ve all heard of flexbox, but I’ve always struggled to think of decent use-cases. That was partially down to the browsers I’d need to support, but mostly because the stuff I’d need to build just didn’t need it. Recently, I started using it for various things now that the browser support at Ghost is IE10 and up (which is epic!). Having native support for flexbox in our target browsers is brilliant, and with the Flexie polyfill, we can also support IE9 and down, which i’m sure some people are thankful for. With that out of the way, let’s look at vertical alignment with flexbox.

The downside to writing flexbox is that it has 3 specs with different syntaxes, which makes your code a little bloated. If you use Sass (which you should be), this set of mixns makes life easier, which uses the 2009 and 2012 specs.

Let’s say we want to vertically align some text in a header. Here’s a solution in the form of a CodePen.

See the Pen FgzxK by Paul Adam Davis (@PaulAdamDavis) on CodePen.

CSS tables

I used to use CSS tables a lot, but the extra markup got a little annoying, and the flexibility of flexbox was all too alluring. That said, CSS tables work just about everywhere. The only gotcha is Firefox doesn’t let you apply position so any table element, which can be a pain.

Here’s the same example as above, but using CSS tables instead.

See the Pen Bibvs by Paul Adam Davis (@PaulAdamDavis) on CodePen.

Padding

Using padding to vertically centre is best kept to form elements, and anywhere else where you can’t add child element, including content. I’m sure we’ve all seen issues where using line-height: 30px; on an leads to the blinking cursor filling the height of the input, which looks awful. The cursor also tends to only show the top half when you actually type too. It’s also inconstant across browsers, so padding is your friend here.

In this code pen, I have an inout next to a button. The top set is using line-height for anything height related and the bottom uses padding.

See the Pen uvjdC by Paul Adam Davis (@PaulAdamDavis) on CodePen.

In closing…

Open each pen in a new tab and play around resizing the browser. Hopefully you see how useful the top two techniques are for responsive sites that don’t need special treatment on smaller screens, which is kind of the whole point.

I am a Ghost

On April 2nd 2012, I left the world of full-time work and started freelancing. I’ve had a lot of fun and some some amazing with for brilliant people. I gave it a damn good go, but ultimately, it wasn’t for me

Today, I am excited to announce that I am joining Ghost as a Front-End Architect.

How do I feel? Really fucking excited.