How to align center the item in the table
Question
I'm in making the responsive table using Bootstrap and some items are not aligned at the center of cell because the parent row element has multiple lines for some cells.
So I tried to apply flex-box style to table but it doesn't work well.
What should I do for sitting the element at the center of table.
- HTML
<table class="table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Video Sync</th>
<th scope="col">Video Sync Pro</th>
<th scope="col">ADR Master Editor</th>
<th scope="col">ADR Master Studio</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left feature feature-title">MOVIE PLAYBACK</td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
</tr>
<tr>
<td class="text-left feature">Support for all of the most common codecs and containers</td>
<td class="text-center"><span class="fa fa-check-circle"> </span></td>
<td class="text-center"><span class="fa fa-check-circle"> </span></td>
<td class="text-center"><span class="fa fa-check-circle"> </span></td>
<td class="text-center"><span class="fa fa-check-circle"> </span></td>
</tr>
</tbody>
</table>
- CSS
.table td {
display: flex;
align-items: center;
justify-content: center;
}
2 answers
solution1
2 ACCPTED 2021-06-09 09:45:18
Normally the flex-box style doesn't apply to table .
Instead of flex-box style, you can use vertical-align property for vertical and text-align property for horizontal.
- CSS
.table td, table th {
text-align: center;
vertical-align: center;
}
solution2
0 2021-06-09 09:26:06
Below is a pure html no css of any sort and it is vertically aligning text for mexico, you question posted picture please post some bare minimum code so we know what you had already worked on.
<!DOCTYPE html> <html> <head> </head> <body> <h2>HTML Table</h2> <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td height="100">Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.