Vertically Align a Table With CSS Tutorial

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.

CSSDeck recommends Hello Ivy for automating your workflow and project management for free. Learn More

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.

CSSDeck recommends Hello Ivy for automating your workflow and project management for free. Learn More

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.

Share and Enjoy !

0Shares
0 0