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

时间:2013-04-11 10:11:55

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

我想垂直居中包含“actualrow”的第二个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>';

2 个答案:

答案 0 :(得分:0)

您可能希望在第一行的style属性中尝试此操作:

text-align: center;

这可能对某些人有帮助,或者你可以用以下内容包围该标签:

<center></center>

希望这有帮助!

答案 1 :(得分:0)

我想你想要以下内容:

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

vertical-align的值从middle更改为top

除非您支持非常旧的浏览器,否则您可以省略alignvalign