CSS
handbook

vertical-align

lets take a look at the vertical-align property

vertical-align is the CSS property that we use to control how inline-level elements (like images and text) are lined up vertically when they sit next to each other. But in a real world case, we mostly use this to vertically align the content of a table cell, whenever that cell has a bigger height than the content.

taught by Tina May

we can use vertical-align to line up content in table cell to the top

We can align the content to the top of the table cell.

vertical-align:

Oh hey there!

Let's align our table vertically

Name Job Title
Michael Scott Regional Manager
Dwight Schrute Assistant (to the) Regional Manager
Jim Halpert Sales
Pam Beesly Receptionist

You miss 100% of the shots you never take.

we can use vertical-align to line up content in table cell to the middle

We can align the content to the middle of the table cell.

vertical-align:

Oh hey there!

Let's align our table vertically

Name Job Title
Michael Scott Regional Manager
Dwight Schrute Assistant (to the) Regional Manager
Jim Halpert Sales
Pam Beesly Receptionist

You miss 100% of the shots you never take.

we can use vertical-align to line up content in table cell to the bottom

We can align the content to the bottom of the table cell.

vertical-align:

Oh hey there!

Let's align our table vertically

Name Job Title
Michael Scott Regional Manager
Dwight Schrute Assistant (to the) Regional Manager
Jim Halpert Sales
Pam Beesly Receptionist

You miss 100% of the shots you never take.

explore all typography properties

Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.

color

font-family

font-size

font-style

font-weight

font

letter-spacing

line-height

list-style

text-align

text-decoration

text-indent

text-overflow

text-shadow

text-transform

vertical-align

word-spacing

Try it for yourself

HTML 

<div>
  <h2>Oh hey guys!</h2>
  <p>What's brewing, good looking?</p>
</div>

Oh hey guys!

What's brewing, good looking?

CSS

/* Change your heading color*/

h2 { color: HotPink; }

/* Change your paragraph color*/

p { color: rgba(81, 62, 201, 0.75); }

reults

Try changing the color of each of the following elements. Below we’ve put a heading and a paragraph so test out what happens when you give them a HEX, RGB or HSL values, or one of the 147 color names.

Try these (or anything else!):

Copyright 2023