How to Vertically Align Text Using CSS

You have a large HTML Div with some text inside. You’ve got text centered horizontally with CSS no problem, but vertically? Hmm. That’s a little trickier and you’re stumped.

Or maybe you want a completely different kind of CSS vertical align text altogether. Maybe you have a line of text with two different font sizes and you want the smaller font to be vertically aligned to the middle of the larger font size – like a quote or citation or something like that.

Both are completely different scenarios, with different solutions but both of them make you want to scream the same thing: CSS vertical align text how I do dis???

It can be frustrating, but we have options – let’s take a look.

Defining our Scenarios

I know we kinda defined the scenarios already in the introduction to this post, but let’s make sure we’re absolutely clear on what we’re trying to accomplish here.

Scenario 1

We have an HTML div where we want the text inside the div to be vertically aligned at the center. Like this:

Scenario 2

We have a line code that has two different font sizes. We want the smaller font size to be vertically aligned to the middle of the larger font size. Like this:

Let’s start off with the first scenario.

CSS Vertical Align Text with CSS Flexbox

So we want to vertically align text in a div or some other container.

One way to do this, is to use CSS Flexbox. If you’re unfamiliar with Flexbox, it’s a CSS layout module that makes it easier to make your layout design more flexible and responsive.

Flexbox allows you to have a little more control over your layout and makes vertically aligning text a breeze using the align-items selector.

Let’s take a look at the code:

See the Pen CSS Vertical Align Text Scenario 1 – Flex by Kris Barton (@TheWebDeveloperGuide) on CodePen.

Here, I’m using 3 CSS Flexbox selectors:

1. I’m declaring it a Flexbox item using display: flex; This means that I’m making it possible for anything inside that div (child elements) to be controlled by CSS Flexbox.
2. I’m using justify-content: center to center the text horizontally.
3. I’m using align-items: center to align the text vertically.

Can I Use Flexbox Align-Items?

Before you take this as your final solution, you should probably first work out whether you’re able to actually use CSS Flex and the align-items selector.

Why can’t I use it? You might be asking yourself. The answer is simple: browser support. CSS Flex doesn’t work all that great in older browser – particularly IE (surprise, surprise).

In fact, even IE11 is listed as having only partial support (IE Edge supports it completely).

So if you need to support older browsers for any reason, just be aware of this. You can find out more about the browser support for the align-items CSS selector at CanIUse.com.

CSS Vertical Align Text with CSS Grid

We can accomplish CSS vertical align text with a newer CSS layout module know as Grid. CSS Grid is a bit of an update on CSS Flexbox and is really useful for making great layouts.

Here’s a Codepen showing how we vertically aligned our text using CSS Grid:

See the Pen CSS Vertical Align Text Scenario 1 – Grid by Kris Barton (@TheWebDeveloperGuide) on CodePen.

For a simple example such as this, it might seem there’s no difference between the CSS Flexbox and CSS Grid layout modules, but once your layout become a little more complicated the power of the Grid layout style will become more and more apparent.

Can I Use CSS Grid Align-Items?

Again, a word of warning before you implement this solution: make sure you’re able to use it on whichever web browsers you support.

Despite CSS Grid is a newer technology than CSS Flexbox, there’s still pretty much the same support there. There’s minor support on IE10 and IE11 (limited functionality and what you can do must be limited to IE specific CSS selectors), but every other modern browser is basically fine.

Again, you can check out browser support for CSS Grid yourself at CanIUse.com.

CSS Vertical Align Text with CSS Absolute Positioning

With all the wonderful layout functionality that’s built into CSS, using Absolute Positioning in CSS to accomplish our goal of vertically aligning text, in my opinion, is a little bit overkill.

BUT for thoroughness, it’s worth mentioning this way of aligning text vertically just in case it’s the only option available to you (for whatever reason).

Take a look at our Pen:

See the Pen CSS Vertical Align Text Scenario 1 – Absolute Positioning by Kris Barton (@TheWebDeveloperGuide) on CodePen.

As you may notice, there’s a little more going on in here.

Firstly, if you’ve used absolute positioning in CSS before then you’ll know that if I want my item to be positioned absolutely within the containing div, then that divs positioning must be set explicitly to relative. Otherwise, the div assigned absolute positioning will not be contained to the container – just the webpage itself.

Secondly, you may be wondering about the use of the CSS Calc function. For those of you who haven’t used the Calc function before, your missing out on a really powerful CSS feature. I’m not going to go into too much detail about the function here, but go read more about it at W3Schools for more information – it’ll be SO worth your time. Essentially, what I’m doing here is calculating the true middle of the container div, based on the height of the inner div.

Let me explain: when you use top  50%, the web browser will calculate 50% from the top of the container div (in this case .box) to the top of our inner div (.box__content). This means the content inside the inner div will fall below the middle of the contain div and just look off.

There are a number of ways to combat this, but assigning the inner div a set height and using the CSS Calc function to work out absolute center is the sleekest option for me.

You could just tweak the top value until it looks right, but then you’ll end up with a value of 47% or some other random number (or magic number if you like) which isn’t as web developer friendly for my liking.

Let’s take a look how we can vertically align our text for the second scenario.

CSS Vertical Align Text with Vertical Align CSS Selector

Let’s start off by defining a real-world example of why you might need to vertically align different sized font on the same line.

We want to create a standard quote styling in which the actual quote text is larger than the citation.

In this situation you’d use the vertical-align selector tag and set it’s value to middle.

As the name of the CSS selector suggests, the vertical-align property sets the vertical alignment of an inline or table property. It has a number of cool options:

1. Baseline
2. Top
3. Middle
4. Bottom
5. Sub
6. Text-Top
7. Length (in which you can specify a value for the vertical alignment)
8. Percentage (in which you can specify the percentage of the vertical alignment)

For the task we’re trying to accomplish here, we’re going to use the middle option. See our demo Codepen below:

See the Pen CSS Vertical Align Text Scenario 2 by Kris Barton (@TheWebDeveloperGuide) on CodePen.

This way of vertical alignment in CSS is actually really quite useful, especially of you have a combination of text and images you want to line up just right on the same line.

Conclusion

CSS Vertical Align Text can mean 2 different things.

1. You want to align text vertically within a container.
2. You want larger and smaller text or text and images to align vertically inline.

For the first scenario there are 3 different ways to do it:

1. Using CSS Flexbox.
2. Using CSS Grid.
3. Using CSS Absolute position.

Option 1 or 2 are the best ways to vertically align text within a container, but don’t have full support in some of the older web browsers.

For the second scenario, there’s only really one option that makes any kind of sense: the vertical-align: middle tag.

Further Reading

• Vertical Align CSS Property – MDN Web Docs
• W3Schools Vertical Align Property
• Flexbox Cheat Sheet – CSS Tricks
• W3Schools CSS Flexbox
• Basic Concepts of Flexbox – MDN Web Docs
• Align-Items Property – W3Schools
• CSS Positioning – W3Schools
• CSS Calc Function – W3Schools