<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};在互联网浏览器8中完美运行,但即使我拥有最新版本,它也不适用于谷歌浏览器.
我认为你有一个简单的语法问题,分号应该在结束括号内.
请参阅下面的代码.
此外,添加height: 100%到body,并html以设置表单元格高度的参考.
注意:正如其中一篇发表的评论中所述,您没有为其定义CSS样式left,因此不清楚您的意图.它本身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>