Last Updated on July 16, 2021 by Roshan Parihar
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<table class="table table-hover table-bordered"> <tr> <th>Cricketer Name</th> <th>Team Name</th> <th>Score</th> </tr> <tr> <td>Shikhar Dhawan</td> <td>India</td> <td class="text-center">87</td> </tr> </table> |
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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<style> .tablecenterheadCSS th{ text-align:center; } </style> <table class="tablecenterheadCSS table table-hover table-bordered"> <tr> <th>Cricketer Name</th> <th>Team Name</th> <th>Score</th> </tr> <tr> <td>Shikhar Dhawan</td> <td>India</td> <td>87</td> </tr> <tr> <td>Yuvraj Singh</td> <td>India</td> <td>97</td> </tr> </table> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<style> .tablecenterCSS td{ text-align:center; } </style> <table class="tablecenterCSS table table-hover table-bordered"> <tr> <th>Cricketer Name</th> <th>Team Name</th> <th>Score</th> </tr> <tr> <td>Shikhar Dhawan</td> <td>India</td> <td>87</td> </tr> <tr> <td>Yuvraj Singh</td> <td>India</td> <td>97</td> </tr> <tr> <td>Shikhar Dhawan</td> <td>India</td> <td>87</td> </tr> </table> |
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
- Center Align Unordered List inside Div Using CSS
- Left Align Button, Right Align, and Center Align Using Bootstrap
- CSS text align
- Bootstrap Table
I hope you like this tutorial on how to center align the text of a table cell using Boostrap and CSS.
References