如何将表格中的项目居中对齐
[英]How to align center the item in the table
问题描述
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.
我正在使用 Bootstrap 制作响应式表格，并且某些项目未在单元格的中心对齐，因为父行元素对于某些单元格具有多行。
So I tried to apply flex-box style to table but it doesn't work well.所以我尝试将flex-box样式应用于表格，但效果不佳。
What should I do for sitting the element at the center of table.我应该怎么做才能将元素放在桌子的中心。
- HTML 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 CSS
.table td {
display: flex;
align-items: center;
justify-content: center;
}
2 个解决方案
解决方案1
2 已采纳 2021-06-09 09:45:18
Normally the flex-box style doesn't apply to table .通常flex-box样式不适用于table 。
Instead of flex-box style, you can use vertical-align property for vertical and text-align property for horizontal.代替flex-box样式，您可以使用vertical-align属性作为垂直和text-align属性作为水平。
- CSS CSS
.table td, table th {
text-align: center;
vertical-align: center;
}
解决方案2
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.下面是纯 html 没有任何类型的 css，它是墨西哥的垂直对齐文本，您对发布的图片有疑问，请发布一些最低限度的代码，以便我们知道您已经在做什么。
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.