如何在表格行中间对齐文本和图像
[英]How can I middle align text and images in table row
问题描述
I want to middle align the following - how can I do that: 
我想中间对齐以下内容-如何做到这一点：
<div class="container-fluid" style="height:100%"> <table id="PulseTable" class="display2" style="height:100%"> <tbody id="PulseBody" style="height:100%"><tr class="pulseheader"> <td class="pulseheader" style="padding-top: 10px; padding-bottom: 10px; font-size: 16px; font-weight: bold;">Manager</td> </tr> <tr class="pulseline" style="height: 20px;"> <td class="pulseline" style="padding-left: 40px; font-size: 12px; font-style: normal;">Header</td> <td class="pulseline" style="padding-left: 20px; font-size: 12px; font-style: normal;">New York II</td> <td class="NONE" style="padding-left: 20px;"><img src="http://blog.sckyzo.com/wp-content/google-small.png" style="height: 30px; width: auto;"></td> </tr> <tbody> </table> </div>
3 个解决方案
解决方案1
1 2016-12-20 13:25:30
To center them horizontally within each table cell, use: 要在每个表格单元格中将它们水平居中，请使用：
text-align: center;
To center them vertically (this only works with tables, or elements with display: table-cell ): 垂直居中（仅适用于表或具有display: table-cell元素）：
vertical-align: middle;
Apply these styles to the <td> element. 将这些样式应用于<td>元素。
<table>
<tr>
<td style="text-align: center; vertical-align: middle;">
Foo bar
</td>
</tr>
</table>
解决方案2
0 2016-12-20 13:25:16
I hope it works for you 我希望这个对你有用
.container-fluid{
position:relative;
margin: 0px auto;
}
解决方案3
0 2016-12-20 13:26:48
You need to use COLSPAN to merge the cell in the first line and also use CSS style "text-align: center" to align it do center: 您需要使用COLSPAN合并第一行中的单元格，还需要使用CSS样式“ text-align：center”将其居中对齐：
<div class="container-fluid" style="height:100%"> <table id="PulseTable" class="display2" style="height:100%"> <tbody id="PulseBody" style="height:100%"><tr class="pulseheader"> <td class="pulseheader" colspan="3" style="padding-top: 10px; padding-bottom: 10px; font-size: 16px; font-weight: bold; text-align: center">Manager</td> </tr> <tr class="pulseline" style="height: 20px;"> <td class="pulseline" style="padding-left: 40px; font-size: 12px; font-style: normal;">Header</td> <td class="pulseline" style="padding-left: 20px; font-size: 12px; font-style: normal;">New York II</td> <td class="NONE" style="padding-left: 20px;"><img src="http://blog.sckyzo.com/wp-content/google-small.png" style="height: 30px; width: auto;"></td> </tr> <tbody> </table> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.