Menu
I have a bootstrap hover table and I'm trying to align the column headers to the middle by using <th align="center">. This seems to have no effect on the table whatsoever, but <td align="center"> works properly.
This is my code:
<table class="table table-hover"> <thead> <tr> <th>Title</th> <th>Score</th> <th align="center">Product</th> #This line is not working <th>Who Reviewed</th> <th>When</th> </tr> </thead> <tbody> {% for review in object_list %} <tr> <td><a href="{% url 'backend_reviews_edit' review.pk %}">{{review.title}}</a></td> <td align="center">{{ review.score }}</td> <td align="center">{{ review.product.title }}</td> <td>{{ review.reviewer_name}}</td> <td>{{ review.date_created|date:"m-d-Y" }}</td> </tr> {% endfor %} </tbody> </table> </div> 
589
By adding the ” text-center” class of Bootstrap 3 We can use the “text-center” class of bootstrap 3 for the center-alignment of an element. So in our td when we add “text-center” class, and then our table text goes to the center.
To center align text in table cells, use the CSS property text-align. The <table> tag align attribute was used before, but HTML5 deprecated the attribute. Do not use it. So, use CSS to align text in table cells.
HTML | <th> align Attribute left: It sets the text left-align. right: It sets the text right-align. center: It sets the text center-align.
If you're using bootstrap, use its CSS rules.
<th class="text-center">Product</th> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
