相对表格单元格中的垂直对齐答案

【问题标题】：vertical-alignment in relative table-cell相对表格单元格中的垂直对齐
【发布时间】：2013-04-03 11:47:56
【问题描述】：

我想在不改变表格高度的情况下将包含“实际行”的第二个 td 元素垂直居中。

我已经尝试了很多方法来垂直对齐我的 td 元素，希望您能帮助我解决这个问题。我不得不削减代码，否则它会太大所以我希望下面发布的代码就足够了。

echo '<table cellspacing="5%" cellpadding="14%" width="37.5%" rules="rows" border="1"   class="datatable" style="position:absolute;table-layout:fixed;left:12.42%;top:27%;border-right-width:6px;border-color:black">';
.
.
.

echo "<tr class='even'>";
$actualrow = $row['wav_nr'];
echo '<td nowrap border="0" align="left" valign="middle" style="position: relative;vertical-align: middle;">&nbsp;Wave ' . $actualrow . '</td>';

echo '<td nowrap align="center" valign="middle" style="position: relative;vertical-align: middle">' . (($actualrow * 10) - 9) . ' - ' . ($actualrow * 10) . '<br/>' . $moved_athletes . '</td>';
echo '<td nowrap align="center" valign="middle" style="vertical-align: middle;">' . date_create($row['wav_time'])->format('H:i') . '</td>';
echo '</tr>';

【问题讨论】：

标签： html css cell vertical-alignment html-table

【解决方案1】：

你可能想在第一行的 style 属性中试试这个：

text-align: center;

这可能会有所帮助，或者您可以在该标签周围加上：

<center></center>

希望这会有所帮助！

【讨论】：

感谢您的一些提示！我通过给一个“height:65px”样式属性来修复它。我还删除了 html 对齐并将 text-align:center 添加到标签。它只是工作！

【解决方案2】：

我认为您想要以下内容：

 echo '<td nowrap border="0" align="left" valign="middle" style="position: relative;vertical-align: top;">&nbsp;Wave ' . $actualrow . '</td>';

将vertical-align 的值从middle 更改为top。

除非您支持非常旧的浏览器，否则您可以省略align 和valign。

【讨论】：