bootstrap表格内容距离上下也居中
时间: 2023-12-15 20:07:24 浏览: 51
可以通过设置CSS样式来实现Bootstrap表格内容的垂直居中。具体步骤如下:
1. 给表格中的每个单元格设置 `vertical-align: middle;` 样式,这样就可以让单元格的内容垂直居中。
2. 如果表格所在的容器高度固定,可以给容器设置 `display: flex;` 和 `align-items: center;` 样式,这样就可以让整个表格垂直居中。
以下是一个示例代码:
```
<div class="container" style="height: 300px; display: flex; align-items: center;">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<style>
table td {
vertical-align: middle;
}
</style>
```
在上面的代码中,我们给表格容器设置了 `display: flex;` 和 `align-items: center;` 样式,同时给表格中的每个单元格设置了 `vertical-align: middle;` 样式,这样就可以让整个表格垂直居中了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![apk](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)