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

You can center align the head cell of a table or all another cell of the table. You can use either Bootstrap classes or you can use the CSS text properties. However, Bootstrap is the easiest way of center align the text of the table.

Horizontally Center Align Table Text of Cell Using Bootstrap

To centrally align the text of table using Bootstrap. You have to just add the CSS class .text-center to any cell of a table. Add the class to the head cell of td cell of a table which you want to center align.

With the above Bootstrap class, you can use other Bootstrap text-align classes for alignment of content.

Output

Cricketer Name Team Name Score
Shikhar Dhawan India 87

The above contains the first row with th cell and second row with td cell. The second row has the last cell with center-aligned text with Bootstrap class.

Center Align Table Text of Head Cell Using CSS

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

Output

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

The above example contains the head cell with all the text centrally aligned. If you want to centrally align the td cell, you have to read further.

How to Center Align Table Text of All td Cell Using CSS

In addition to aligning the text of head cell of a table. You can make the text of td cell of a table center align using CSS. To center align the text of TD cell, you have to use the below CSS with CSS property text-align:center.

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.

Hope, you like this tutorial of how to center align the text of a table cell using Boostrap. If you have any query regarding the tutorial, please comment below.

Also tell me, which method you are using to make text center align for table cell.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.