##為什麼要有這功能
垂直對齊（vertical-align）是用來控制元素在其父容器中的垂直位置，尤其對於 inline 元素或表格單元格中的內容非常有用。無論是對齊基線、調整上下標文字，還是設定元素相對於其父級內容的對齊方式，這個屬性都能提供多樣化的控制，使頁面排版更加靈活。

##核心結構
baseline: 元素與父容器的基線對齊，是大多數情況下的預設值。
sub/super: 分別將元素對齊為下標或上標，適用於數學公式或化學標記等應用。
text-top/text-bottom: 將元素對齊到父容器的文字頂部或底部，適合處理不同大小的字體或圖像。
middle: 元素相對於父容器垂直置中，適合調整 inline 元素或圖片的對齊方式。
top/bottom: 將元素對齊到父容器的頂部或底部，能靈活控制各類內容的顯示位置。
長度/百分比: 使用具體數值（如px或%）來調整元素的垂直對齊，提供更精細的控制。

##主要功能
控制文字和元素的對齊方式: 支援上標、下標等特殊格式的呈現。
適用於 inline 元素和表格: 特別適合對表格單元格的內容進行微調，讓排版更加整齊。
多種垂直對齊選項: 提供靈活的對齊方式，滿足不同設計需求，從基線對齊到使用具體的長度或百分比。

##注意事項
inline 元素專用: vertical-align 主要作用於 inline 元素，對 block 元素無效。
不同瀏覽器兼容性: 某些對齊選項可能在不同的瀏覽器中有不同的呈現效果，測試尤為重要。
表格與圖像對齊: 特別適用於表格或 inline 圖像的對齊調整，適合精細的版面設計。

##簡單範例應用

<Style>
.sub-text {
    vertical-align: sub; /* 將文字設為下標 */
}

.super-text {
    vertical-align: super; /* 將文字設為上標 */
}

.middle-align {
    vertical-align: middle; /* 將圖片或元素垂直置中 */
}

.baseline-align {
    vertical-align: baseline; /* 文字與父容器基線對齊 */
}
</Style>

<p>這是一般的文字
    <span class="sub-text">下標</span>
    和<span class="super-text">上標</span>
</p>

<div style="display: inline-block;">
    <img src="image.png" class="middle-align" alt="圖片"> //垂直置中的圖片
</div>

<p>文字與基線對齊
    <span class="baseline-align">基線對齊</span>
</p>