How to Use CSS’s Vertical-Align Property

Aligning elements vertically is a lot different from aligning them horizontally. There are a few different ways we can align elements horizontally, or center elements horizontally, either using the margin properties or the text align properties or some complicated combination of one of those and some tricky jQuery. There is one best way to align HTML elements vertically, however, and it is by using the vertical align property.

The vertical align property can be used to tell your elements where they need to vertically line up on the page in relation to their surrounding elements. The property takes several different values, which include:

  • baseline: this is the default, and will vertically align and element with the baseline (bottom) of its parent element
  • sub: this will align the element to its parent as if it were subscript
  • super: similar to sub, this will align the element to its parent as if it were superscript
  • top: this aligns the element with the top line of its parent
  • text-top: this aligns the element with the top line of its parents text
  • middle: this will align the element with the middle of the parent element
  • bottom: this will align the element with the bottom line of the parent element
  • text-bottom: this aligns the element with the bottom line of its parents text
  • “length”: move the element around vertically by assigned a fixed length to the property in px, ems, or %.

A really common way that the vertical align property is used is in relation to images. Let’s say you have an image and a line of text and you want them to stack up next to each other without using the float property, so you force the text to display inline rather than as a block-level element. You’ll end up with something that looks a lot like this:

Screen Shot 2017-04-19 at 5.30.57 PM

Almost what we’re going for…but not quite. Here’s where the vertical-align property comes in. With just one simple line of code, we can get that text to align with the top of the image. Check it out below:

p{
   vertical-align: top;
}

After the code above is applied, your page should now look like the screenshot below:

Screen Shot 2017-04-19 at 5.31.14 PM

As you can see, the text is now vertically aligned with the top of the image, which is its parent element. Now that you understand the basics of how to use the vertical-align property, be sure to play around with it when writing your own code.

8 Awesome CSS Textarea Snippets

Screen Shot 2017-04-19 at 4.54.04 PM

Textareas are HTML elements that are meant for inputting large amounts of text. They differ from input fields because they are a lot larger than a typical input field, and can be manually resized by the user to accommodate a great deal of text. Most developers and designers don’t pay a whole lot of attention […]

Read on...

How to Create an Animated Input Field with CSS

Screen Shot 2017-04-14 at 2.14.57 PM

Input fields are often overlooked when it comes to styling, which is a shame because there are so many cool things that can be done to them to make them look stylish, cool, and the opposite of plain and boring. In this tutorial, we’ll show you how to add some style and animation that will […]

Read on...

6 Fun CSS Snippets for Your Projects

Screen Shot 2017-04-14 at 1.45.06 PM

One of the reasons that CSS is so fun to play around with is that you can use it to create so many different kinds of effects or styles. The styling language is incredibly versatile and can actually be really fun to use if you know your way around it and enjoy being creative. What […]

Read on...

4 Free Color Palette Generators for Your Projects

Screen Shot 2017-03-02 at 1.05.58 PM

Sometimes even we developers and designers have creative blocks and need something to draw inspiration from. For example, often as a designer or developer, you may find yourself drawn to the same colors or color schemes over and over. When you find yourself in a creative rut such as this, a great way to get […]

Read on...

How to Create a Website Layout Without Coding

Screen Shot 2017-03-02 at 12.10.28 PM

Do you really want a custom website, but you don’t really know how to code and don’t want to hire someone to do it? If this is the case, Templatr is possibly the right tool for you. You can use it to create a totally custom website layout completely from scratch without having any knowledge […]

Read on...

7 Free CSS Snippets for Spring

Screen Shot 2017-02-22 at 4.36.54 PM

It seemed like winter would never end, but we’ve reached the light at the end of the tunnel — now it’s April and spring is finally springing!! To celebrate the new season and the upcoming warmth, here’s a list of seven of our favorite (and free!) spring-themed CSS snippets to add some color and brightness to […]

Read on...

8 Free Icon Sets You Didn’t Know You Needed

Screen Shot 2017-02-17 at 12.57.15 PM

As developers and designers, it can sometimes feel like we’re always scrounging around for the latest freebies, and few freebies are better than a free set of icons. The possibilities for a free icon set are endless, as is the amount of projects you can use just one set for, depending on the variety of […]

Read on...

Top 7 CSS Snippets Featuring Outer Space

Screen Shot 2017-03-24 at 12.02.27 PM

Outer space is trending, especially after the recent discovery of a whole lot of new planets. If you want to keep your designs and projects on trend, maybe consider including some of these awesome space-themed CSS snippets in your sites. 1. Pure CSS Planet   If you’ve ever wanted to create something as cool as a […]

Read on...

5 Helpful CSS Tools for New Developers

Screen Shot 2017-03-24 at 11.43.02 AM

If you’re just beginning to learn CSS, it’s possible that you might find yourself feeling overwhelmed and unsure of where to begin, and if you’re writing your code properly and following CSS best practices. Luckily there are dozens of free resources and tools available online for you to use to check, validate, and maintain your […]

Read on...