table垂直對齊屬性valign

2012/11/20 13:50:58作者：佚名來源：網絡

移動端

【實例介紹】

table垂直對齊屬性valign

<tr>的valign屬性用來控制表格當前行的垂直對齊方式，在垂直方向上，設計者可以設定行的對齊方式，使用valing屬性可以改變行內容的垂直默認對齊方式。

【基本語法】

【語法介紹】

valign的屬性值分別為居上(top)、居中(middle)和居下(bottom)，通常情況下，瀏覽器會垂直居中地生成單元格內容。

【實例代碼】


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>垂直對齊屬性</title>
</head>
<body>
<table width="80%" border="1" cellpadding="10" cellspacing="0" align="center">
  <tr valign="top">
    <td >一世等待，一場空白</td>
  </tr>
  <tr valign="middle">
    <td>塵緣如夢，相逢是緣</td>
  </tr>
  <tr valign="bottom">
    <td>紅塵陌上，依舊孑然</td>
  </tr>
</table>
</body>
</html>

【代碼分析】

在代碼中，加粗部分的代碼標記用于設置表格行文字的對齊方式，在瀏覽器中預覽，可以看到第1行文字頂端對齊，第2行文字居中對齊，第3行文字底部對齊，如圖所示。

垂直對齊屬性valign運行效果