如何将表格中的项目居中对齐
[英]How to align center the item in the table
问题描述
我正在使用 Bootstrap 制作响应式表格，并且某些项目未在单元格的中心对齐，因为父行元素对于某些单元格具有多行。
所以我尝试将flex-box样式应用于表格，但效果不佳。
我应该怎么做才能将元素放在桌子的中心。
- 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 个解决方案
解决方案1
2 已采纳 2021-06-09 09:45:18
通常flex-box样式不适用于table 。
代替flex-box样式，您可以使用vertical-align属性作为垂直和text-align属性作为水平。
- CSS
.table td, table th {
text-align: center;
vertical-align: center;
}
解决方案2
0 2021-06-09 09:26:06
下面是纯 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>
如何将导航栏中的项目与 HTML 的中心对齐
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.