Html 在引导表中垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27747072/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical align in bootstrap table
提问by Piyush Vishwakarma
I am trying to display a table with 4 columns, one of which is an image.
Below is the snapshot:-
我正在尝试显示一个包含 4 列的表格，其中一个是图像。以下是截图：-
I want to vertically align the text to the center position, but somehow the css doesn't seem to work. I have used the bootstrap responsive tables. I want to know why my code doesn't work and whats is the correct method to make it work.
我想将文本垂直对齐到中心位置，但不知何故 css 似乎不起作用。我使用了引导响应表。我想知道为什么我的代码不起作用，以及使它起作用的正确方法是什么。
following is the code for the table
以下是表格的代码
CSS
CSS
img {
height: 150px;
width: 200px;
}
th, td {
text-align: center;
vertical-align: middle;
}
HTML
HTML
<table id="news" class="table table-striped table-responsive">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Photo</th>
</tr>
</thead>
<tbody>
<?php
$i=0;
foreach ($result as $row)
{ ?>
<tr>
<td>
<?php echo 'Lorem Ispum'; ?>
</td>
<td>
<?php echo '[email protected]'; ?>
</td>
<td>
<?php echo '9999999999'; ?>
</td>
<td>
<?php echo '<img src="'. base_url('files/images/test.jpg').'">'; ?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
回答by hungerstar
回答by Andreas Bergstr?m
As of Bootstrap 4 this is now much easier using the included utilitiesinstead of custom CSS. You simply have to add the class align-middleto the td-element:
从 Bootstrap 4 开始，现在使用包含的实用程序而不是自定义 CSS更容易。您只需将类align-middle添加到 td-element 中：
<table>
<tbody>
<tr>
<td class="align-baseline">baseline</td>
<td class="align-top">top</td>
<td class="align-middle">middle</td>
<td class="align-bottom">bottom</td>
<td class="align-text-top">text-top</td>
<td class="align-text-bottom">text-bottom</td>
</tr>
</tbody>
</table>
回答by Pawe? Gil
For me <td class="align-middle" >${element.imie}</td>works. I'm using Bootstrap v4.0.0-beta .
对我来说<td class="align-middle" >${element.imie}</td>有效。我正在使用 Bootstrap v4.0.0-beta 。
回答by Vasco
The following appears to work:
以下似乎有效：
table td {
vertical-align: middle !important;
}
You can apply to a specific table as well like so:
您也可以像这样应用到特定的表：
#some_table td {
vertical-align: middle !important;
}
回答by Syukur Zay
SCSS
社会保障局
.table-vcenter {
td,
th {
vertical-align: middle;
}
}
use
用
<table class="table table-vcenter">
</table>
回答by Andrew Kozlov
Try:
尝试：
.table thead th{
vertical-align:middle;
}
