How to Vertically Align Text in a Table Column Using CSS?

In web development, tables are used to present data in rows and columns. Proper alignment of text in table cells is crucial for making the data readable and well-organized. While horizontal alignment of text is relatively straightforward, vertically aligning text in a table column can be a bit more challenging. Fortunately, CSS provides various ways to vertically align text within table columns, whether you are working with static or dynamic content.

In this blog, we’ll explore multiple techniques to vertically align text in a table column using CSS. Each method offers a unique approach depending on the type of layout and the level of control you need.

---

1. Using vertical-align for Table Cells

The most common and straightforward way to vertically align text in a table column is by using the vertical-align property. The vertical-align property is specifically designed for inline and table-cell elements, making it the ideal choice for aligning text inside table cells.

Example:

<table class="vertical-align-table">
  <tr>
    <td>Top Aligned</td>
    <td class="middle">Middle Aligned</td>
    <td class="bottom">Bottom Aligned</td>
  </tr>
</table>

.vertical-align-table td {
  border: 1px solid black;
  height: 100px;
  width: 150px;
  text-align: center;
}

.vertical-align-table .middle {
  vertical-align: middle; /* Vertically aligns text to the middle */
}

.vertical-align-table .bottom {
  vertical-align: bottom; /* Vertically aligns text to the bottom */
}

Explanation:

• vertical-align: top;, vertical-align: middle;, and vertical-align: bottom; align text at the top, middle, and bottom of the table cell, respectively.
• This property works perfectly for table cells (<td> elements), ensuring the text is vertically aligned based on the content’s height within the cell.

---

2. Using Flexbox for Table Cells

While vertical-align is the most direct method for vertically aligning text, CSS Flexbox can also be used for more modern layouts, providing more control over how content is aligned within table cells.

Example:

<table class="flexbox-table">
  <tr>
    <td class="flexbox-cell">Flexbox Centered Text</td>
  </tr>
</table>

.flexbox-table {
  width: 100%;
  border-collapse: collapse;
}

.flexbox-table td {
  display: flex;
  justify-content: center; /* Horizontally centers the text */
  align-items: center; /* Vertically centers the text */
  height: 100px;
  border: 1px solid black;
}

Explanation:

• display: flex; turns the table cell (<td>) into a flex container.
• justify-content: center; centers the text horizontally.
• align-items: center; vertically centers the text within the cell.
• Flexbox provides better support for complex content alignment, especially if you need to center images, icons, or multi-line text in addition to simple text.

---

3. Using display: table-cell for Custom Layouts

If you’re using custom containers inside your table cells and want to vertically align the content within, you can use display: table-cell on the inner container. This method simulates table-like behavior within your layout.

Example:

<table class="table-cell-layout">
  <tr>
    <td>
      <div class="table-cell-content">Centered Content Using table-cell</div>
    </td>
  </tr>
</table>

.table-cell-layout {
  width: 100%;
  border-collapse: collapse;
}

.table-cell-layout td {
  height: 100px;
  border: 1px solid black;
}

.table-cell-content {
  display: table-cell;
  vertical-align: middle; /* Vertically centers the content */
  text-align: center;
  height: 100px; /* Same height as the table cell */
}

Explanation:

• The inner div is given display: table-cell;, and vertical-align: middle; ensures the text or content inside is vertically centered.
• This method is useful when you have custom containers inside your table cells and want to apply vertical alignment to the inner elements.

---

4. Using Padding for Vertical Alignment (for Fixed-Height Tables)

In some cases, if you know the height of the table cells, you can use padding to create the effect of vertical alignment. This approach isn’t as flexible as others but can be useful for simple layouts.

Example:

<table class="padding-table">
  <tr>
    <td class="padded-cell">Text with Padding</td>
  </tr>
</table>

.padding-table {
  width: 100%;
  border-collapse: collapse;
}

.padded-cell {
  height: 100px;
  padding-top: 35px; /* Adjusts the padding to vertically center the text */
  text-align: center;
  border: 1px solid black;
}

Explanation:

• The height of the table cell is fixed at 100px, and padding-top is set to 35px to push the text down, creating the effect of vertical centering.
• This method requires fixed heights and may not work well for responsive layouts or tables with variable content heights.

---

5. Using CSS Grid for Vertical Alignment

CSS Grid is another modern layout model that allows precise vertical alignment within table cells. Although tables already have built-in cell alignment capabilities, using CSS Grid within table cells can be useful for more complex layouts that involve multiple elements within a cell.

Example:

<table class="grid-table">
  <tr>
    <td class="grid-cell">Text Centered Using CSS Grid</td>
  </tr>
</table>

.grid-table {
  width: 100%;
  border-collapse: collapse;
}

.grid-cell {
  display: grid;
  place-items: center; /* Centers both vertically and horizontally */
  height: 100px;
  border: 1px solid black;
}

Explanation:

• display: grid; turns the table cell into a grid container.
• place-items: center; is shorthand for centering both horizontally and vertically, making this method a quick and modern solution for vertical alignment.
• CSS Grid works well with multi-line text and complex content inside table cells, providing more control over the layout.

---

Which Method Should You Use?

Choosing the right method depends on the complexity of your layout and the type of content in your table cells:

• vertical-align: Best for simple vertical alignment tasks. It’s the easiest and most efficient method for aligning text within table cells.
• Flexbox: Ideal for more flexible and modern layouts where you need to align multiple elements (text, icons, etc.) inside a table cell.
• display: table-cell: Useful for custom containers inside table cells, simulating table-like behavior for vertical alignment.
• Padding: Works for fixed-height tables, but it’s less flexible for responsive designs.
• CSS Grid: Ideal for more complex layouts, where you have multiple elements and need precise alignment control.

---

Conclusion

Vertically aligning text within a table column can be accomplished in several ways depending on your needs. For simple layouts, the vertical-align property provides a straightforward solution. For more modern and complex designs, Flexbox and CSS Grid offer greater flexibility and control. Understanding these techniques will help you create more readable and visually appealing tables in your web designs.

By mastering these alignment methods, you’ll be able to handle any table layout scenario, ensuring your content looks clean, professional, and well-organized.