分类：电脑/网络-软件-网络软件
问题：请看一段有关对齐方式的代码。为什么不能顶端对齐&lt;html> 
<html><head>  <tle>垂直对齐</title><style><!-- p{ vertical-  }      /* 顶端对齐 */ ttom{ vertical-  }    /* 底端对齐 */td.middle{ vertical-  }    /* 中间对齐 */--></style>   </head><body><table cellpadding="2" cellspacing="0" border="1">  <tr>  <html><head>  <tle>垂直对齐</title><style><!-- p{ vertical-  }      /* 顶端对齐 */ ttom{ vertical-  }    /* 底端对齐 */td.middle{ vertical-  }    /* 中间对齐 */--></style>   </head><body><table cellpadding="2" cellspacing="0" border="1">  <tr>    <td></td>    <td ><span  class="top">垂直顶部对齐方式，top</span></td>  </tr>  <tr>    <td></td>    <td class="bottom">垂直居中对齐方式，bottom</td>  </tr>  <tr>    <td></td>    <td class="middle">垂直底部对齐方式，middle</td>  </tr>  </table></body></html>02图片是一个300px乘300px的任意图片。为什么顶部对齐无效呢？
回答：vertical-align是设置竖直方向对齐属性的样式(Style)。注意,这个样式仅对table有效，或者可以说是仅对td有效。 div,ul,li,p等容器的竖直方向永远是顶端对齐的。 如果你改成这样：<html> <head> <title>垂直对齐</title> <style> <!--  p{ vertical-  } /* 顶端对齐 */  ttom{ vertical-  } /* 底端对齐 */ td.middle{ vertical-  } /* 中间对齐 */ --> </style> </head> <body> <table cellpadding="2" cellspacing="0" border="1"> <tr> <td></td> <td class="top">垂直顶部对齐方式，top</td> </tr> <tr> <td></td> <td class="bottom">垂直居中对齐方式，bottom</td> </tr> <tr> <td></td> <td class="middle">垂直底部对齐方式，middle</td> </tr> </table> </body> </html>就没问题了