CSS 设置单元格垂直对齐样式

单元格垂直对齐

table元素定义的表格的垂直对齐方式，可以通过为th元素和td元素设置CSS中的vertical-align属性来完成，可以上对齐、居中对齐，以及下对齐。默认情况下，单元格中的内容是垂直居中对齐的。

语法

th,td{vertical-align:value;}

单元格垂直对齐实例代码，及在线编辑器

实例中的两个表格，第一个为默认情况下单元格内容的垂直方向的对齐方式，第二个表格将th和td的单元格垂直对齐属性设置为bottom，即底部对齐：

<table class='v1'border='1'>
  <tr><th>苹果</th><th>榴莲</th><th>香蕉</th></tr>
  <tr><td>芒果</td><td>水蜜桃</td><td>杨桃</td></tr>
</table>
<br><br>
<table class='v2'border='1'>
  <tr><th>青菜</th><th>苋菜</th><th>香菜</th></tr>
  <tr><td>青椒</td><td>番茄</td><td>南瓜</td></tr>
</table>


<style>
  .v1{width:100%;height:60px;}
  
  .v2{width:100%;height:60px;}
  .v2 th{vertical-align:bottom;}
  .v2 td{vertical-align:bottom;}
</style>

vertical-align属性值

属性值	描述
top	上对齐
bottom	下对齐
middle	居中对齐

hot：热门