Horizontally Center Align Table Text Using Bootstrap and CSS

In this tutorial, learn how to horizontally center align table text with Bootstrap. The short answer is: use the Bootstrap class .text-center to center align the text of each cell of a table.

You can also use the CSS text-align property to center aligns the text content of a cell of a table. Let’s find out how to align the text content of table cells with the examples given here.

Horizontally Center Align Table Text of Cell Using Bootstrap

To center align the text content of a table using Bootstrap, you have to just add the Bootstrap class .text-center to any cell of a table. You can add the class to either <td> cell or <th> cell of a table to make its content centrally aligned.

Test it Live

Output

Cricketer Name Team Name Score
Shikhar Dhawan India 87

The above contains the first row with <th> cell and the second row with td cell. The second row has the last cell with text in the middle using Bootstrap class.

Bonus: download a Free Bootstrap CHEAT SHEET that will show you 20+ most important examples to learn in Bootstrap.

Make Table Head Cell Text Centrally Aligned Using CSS

To make text center position of head cell or <th> cell of a table, you have to use the below CSS. It add the text-align:center property to all the head cell of a table.

Test it Live

Output

Cricketer Name Team Name Score
Shikhar Dhawan India 87
Yuvraj Singh India 97

The above example contains the <th> cell with all the text centrally aligned. If you want to centrally align the <td> cell using CSS, you have to read further.

How to Align Table Text of All <td> Cell Centrally Using CSS

In addition to aligning the text of the head cell of a table, you can also make the text of <td> cell of a table centrally aligned using CSS. To centerally align the text of <td> cell, you have to use the below example.

Test it Live

Output

Cricketer Name Team Name Score
Shikhar Dhawan India 87
Yuvraj Singh India 97
Shikhar Dhawan India 87

The above example make all the <td> cell of a table centrally aligned by adding the CSS property text-align:center property.

DOWNLOAD Free Bootstrap CHEAT SHEET

You May Also Like to Read

I hope you like this tutorial on how to center align the text of a table cell using Boostrap and CSS.

References