css - 如何垂直对齐表格单元格内的文本？

Question

我正在开发一个棒球比分网站。我有一个 session 游戏的正面对决表。

主队在表格中是水平排列的。客队(如下所示)在垂直表格单元格中。

Mississippi State 这个名称使得表格单元格从上到下很长。如何让 Alabama 和 Auburn 与表格单元格的底部对齐？

我正在使用 Html 5。放置 valign="bottom"不适用于 Html 5。

<td>
A<br>
l<br>
a<br>
b<br>
a<br>
m<br>
a<br>
</td>

<td>
A<br>
u<br>
b<br>
u<br>
r<br>
n<br>
</td>

<td>
M<br>
i<br>
s<br>
s<br>
i<br>
s<br>
s<br>
i<br>
p<br>
p<br>
i<br>
 <br>
S<br>
t<br>
a<br>
t<br>
e<br>

</td>

-------- 编辑------这是我正在处理的页面: http://www.hitsnruns.com/pages/matchups/Matchups.php

-------- 编辑 2016 年 3 月 30 日 ------我明白了: http://www.hitsnruns.com/2016/head-to-head-matchups/southeastern-conference/我遍历了每个团队名称并将每个字母包含在

标记中。

Answer 1

很遗憾，我不完全理解您的要求。 fiddle 呢？但也许你正在寻找这样的东西？有关测试，请查看 fiddle

我的设置:HTML:

<div><p>Alabama</p></div>

和 CSS:

div {
  width: 10px;
  word-wrap: break-word;
}

也许您可以将它用于您的餐 table 。