Question

我想中间对齐以下内容 - 我该怎么做：

<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>

Answer 1

要在每个表格单元格中水平居中，请使用：

text-align: center;

将它们垂直居中（这仅适用于表格或带有display: table-cell的元素）：

vertical-align: middle;

将这些样式应用于<td>元素。

<table>
  <tr>
     <td style="text-align: center; vertical-align: middle;">
          Foo bar
     </td>
  </tr>
</table>

Answer 2

我希望它适合你

.container-fluid{
position:relative;
margin: 0px auto;
}

Answer 3

您需要使用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>

如何在表格行中间对齐文本和图像

3 个答案: