Vertically Align a Table With CSS Tutorial

Published January 7, 2015 by CSS Newbies.

Vertically aligning tables in CSS is very simple and a single line of CSS can align your entire table. You can vertically align an entire table or specific table rows and data.

The argument used is “vertical-align” and you can assign many different values to it. I’ve included some of the most common ones and their description below.

baseline: baseline is the default value and aligns the baseline of the element to the baseline of its parent.

sub: Lower the baseline of the box to the proper position for subscripts of the parent’s box.

super: Raise the baseline of the box to the proper position for superscripts of the parent’s box.

top: aligns the element to the top of the tallest element in the line.

text-top: Align the top of the box with the top of the parent’s content area.

text-bottom: Align the bottom of the box with the bottom of the parent’s content area.

middle: aligns the element to the middle of the parent element.

bottom: aligns the element with the lowest element in the line.

length: A specific value (ex: 50px;). Raise (positive value) or lower (negative value) the box by this distance. The value ‘0cm’ means the same as ‘baseline’.

percentage: A specific value (ex: 25%;). Raise (positive value) or lower (negative value) the box by this distance (a percentage of the ‘line-height’ value). The value ‘0%’ means the same as ‘baseline’.

inherit: Takes the same specified value as the property for the element’s parent.

To align an entire table use the following CSS

td { vertical-align: bottom; }

If you only want to align specific elements vertically, assign a class to them and use the following CSS

.class_name { vertical-align: bottom; }

For the official list of values visit the W3 Wiki.

2 Responses

  1. Pingback: Best Alternative to Float in CSS – Using Flexbox | Lunarium Design

  2. Pingback: Negative Margin Spacing Troubleshooting: CSS Newbie | Lunarium Design

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>