<html>
<head>
<style>
table,td {border:1px solid black ;}
table {width : 80% ;height:80%;}
.top {vertical-align:top};
.center {vertical-align: middle};
.bottom {vertical-align: bottom};
</style>
</head>
<body>
<table>
<tbody>
<tr><td class = "top">1</td><td class = "top" "left">2</td><td class = "top" "left">3</td></tr>
<tr><td class = "center" >4</td><td class = "center">5</td><td class = "center">6</td></tr>
<tr><td class = "bottom">7</td><td class = "bottom">8</td><td class = "bottom">9</td></tr>
</tbody>
</table>
</body>
</html>
第 8 行，即 .bottom {vertical-align: bottom}; 在 Internet Explorer 8 中运行良好，但在 google chrome 上不起作用，即使我有最新版本。
最佳答案
我认为你有一个简单的语法问题，分号应该在右括号内。
请参阅下面的代码。
此外，将 height: 100% 添加到 body 和 html 以设置表格单元格高度的引用。
注意:正如其中一条评论所述，您没有为 left 定义 CSS 样式，因此不清楚您的意图。 left 本身不是一个有效的属性。
body,
html {
height: 100%;
}
table,
td {
border: 1px solid black;
}
table {
width: 80%;
height: 80%;
}
.top {
vertical-align: top;
}
.center {
vertical-align: middle;
}
.bottom {
vertical-align: bottom;
}<table>
<tbody>
<tr>
<td class="top">1</td>
<td class="top">2</td>
<td class="top">3</td>
</tr>
<tr>
<td class="center">4</td>
<td class="center">5</td>
<td class="center">6</td>
</tr>
<tr>
<td class="bottom">7</td>
<td class="bottom">8</td>
<td class="bottom">9</td>
</tr>
</tbody>
</table>关于html - 垂直对齐属性不适用于谷歌浏览器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38042439/