CSS - vertical-align 屬性

vertical-align 屬性決定內聯、內聯塊或表格單元格文字的垂直對齊方式。

可能的值

baseline：元素的基線與父元素的基線對齊。
sub：元素的基線降低到適合下標文字的位置。
super：元素的基線提高到適合上標文字的位置。
top：元素框的頂部與行框的頂部對齊（在內聯內容的上下文中），或與表格單元格的頂部對齊（在表格的上下文中）。
text-top：元素框的頂部與行中最高的內聯框的頂部對齊。
middle：元素的基線與由父元素的基線加上父元素字型 x 高度的一半定義的點對齊（在內聯內容的上下文中）。
bottom：元素框的底部與行框的底部對齊（在內聯內容的上下文中），或與表格單元格的底部對齊（在表格的上下文中）。
text-bottom：元素框的底部與行中最低的內聯框的底部對齊。
百分比：元素的基線根據 line-height 屬性值的給定百分比提高或降低。
長度：元素的基線根據給定的長度值提高或降低。此屬性允許使用負長度值。此屬性的長度值為 0 與值 baseline 的效果相同。

應用於

內聯級別和表格元素。

DOM 語法

object.style.verticalAlign = "baseline";

CSS vertical-align - text-bottom 值

這是一個例子

<html>
<head>
<style>
   table,td {height:100px; width:400px; border:1px solid red;}
</style>
</head>
<body>
   <table>
      <tr>
         <td style = "vertical-align:text-bottom;">
            <p>This will be aligned to text-bottom of the cell.</p>
         </td>
      </tr>
      <tr>
         <td style = "vertical-align:top;">
            <p>This will be aligned to top of the cell.</p>
         </td>
      </tr>
      <tr>
         <td style = "vertical-align:text-top;">
            <p>This will be aligned to text-top of the cell.</p>
         </td>
      </tr>
      <tr>
         <td style = "vertical-align:baseline;">
            <p>This will be aligned to baseline of the cell.</p>
         </td>
      </tr>
      <tr>
         <td style = "vertical-align:bottom;">
            <p>This will be aligned to bottom of the cell.</p>
         </td>
      </tr>
      <tr>
         <td style = "vertical-align:middle;">
            <p>This will be aligned to middle of the cell.</p>
         </td>
      </tr>
   </table>
</body>
</html>

列印頁面