CSS vertical-align 屬性入門指南：新手必讀
更新日期： 2024 年 10 月 22 日
在網頁設計中，對齊元素是非常常見的需求。
對於水平對齊，我們可以輕鬆使用 text-align 或 margin 等屬性來實現，但當涉及到垂直對齊時，往往會讓新手感到困惑。
CSS 提供了一個非常重要的屬性——vertical-align，用來控制行內或行內塊級元素的垂直對齊方式。
在這篇文章中，我們將介紹 vertical-align 屬性，探討其常見應用場景，並解析可能遇到的問題。
什麼是 vertical-align 屬性？
vertical-align 是一個 CSS 屬性，主要用來控制 行內元素（inline 或 inline-block 元素）相對於包含塊（containing block）或相鄰元素的 垂直對齊 方式。
這個屬性非常有用，特別是在你希望控制文本、圖片、圖標等內容在同一行內如何對齊時。
需要注意的是，vertical-align 並不會影響塊級元素（block-level elements），因為塊級元素會獨占一行，這個屬性只作用於行內元素。
vertical-align 的常見值
vertical-align 屬性有多種對齊方式，我們將介紹一些最常用的值，並透過代碼範例進行展示。
baseline（基線對齊）
這是 vertical-align 的預設值。
當設置為 baseline 時，行內元素會與其父元素的基線對齊。
基線是字符底部的一條隱形線，通常用於字體對齊。
範例：
<span class="baseline">文本 1</span>
<span class="baseline">文本 2</span>.baseline {
vertical-align: baseline;
}在這裡，兩個 span 元素會基於文字的基線對齊。
top（頂部對齊）
當設置為 top 時，行內元素會與行內框架的頂部對齊。
這對於將圖片或行內塊元素與文字的頂部對齊非常有用。
範例：
<img src="example.jpg" class="top" alt="example">
<span>文本內容</span>.top {
vertical-align: top;
}在這個例子中，圖片會與文本的頂部對齊。
middle（中間對齊）
當設置為 middle 時，元素會相對於父元素的 x-height 垂直居中。
這常用於圖標、按鈕或圖片與行內文字垂直居中對齊。
範例：
<img src="example.jpg" class="middle" alt="example">
<span>文本內容</span>.middle {
vertical-align: middle;
}在這裡，圖片會與文字的中間線對齊。
bottom（底部對齊）
當設置為 bottom 時，元素會與行內框架的底部對齊，適合需要將圖片或其他行內元素與文字的底部對齊的情況。
範例：
<img src="example.jpg" class="bottom" alt="example">
<span>文本內容</span>.bottom {
vertical-align: bottom;
}在這個例子中，圖片會與文本行的底部對齊。
sub 和 super
sub 和 super 分別用來實現下標和上標效果。這在數學公式或化學符號中經常使用。
範例：
<p>H<sub>2</sub>O 是水的化學式。</p>
<p>x<sup>2</sup> 是平方的表示。</p>sub {
vertical-align: sub;
}
sup {
vertical-align: super;
}vertical-align 的應用場景
vertical-align 在多種場景中都非常有用，特別是用於控制行內元素與行內塊級元素的對齊。
以下是幾個常見的應用情境：
圖文並排顯示
當你希望圖片或圖標與文字並排顯示，並且希望它們垂直對齊時，vertical-align 是非常理想的工具。
範例：
<img src="icon.png" class="icon" alt="icon">
<span class="text">圖標與文字垂直居中對齊</span>.icon {
vertical-align: middle;
}
.text {
vertical-align: middle;
}在這個例子中，圖標會與文字的中間線對齊，實現垂直居中效果。
將多個 inline-block 元素垂直對齊
在佈局中，當你有多個 inline-block 元素（如導航欄中的 logo 和 menu），這些元素共享同一行時，vertical-align 能幫助你精確控制它們之間的垂直對齊方式。
範例：
<div class="logo">LOGO</div>
<div class="menu">導航菜單</div>.logo {
display: inline-block;
vertical-align: top;
}
.menu {
display: inline-block;
vertical-align: middle;
}在這個例子中，logo 和 menu 使用了不同的對齊方式，logo 被設置為與頂部對齊，而 menu 被設置為垂直居中。
vertical-align 相關問題解析
vertical-align 作用於行內級別元素
vertical-align 的主要作用對象是 行內元素（inline-level），包括行內元素（如 <span>、<img>）和行內塊級元素（inline-block）。
它控制的是這些元素相對於包含塊的垂直對齊方式，並不適用於塊級元素。
行內元素之間的基線對齊
當多個行內或行內塊元素（如 .logo 和 .menu）共享同一行時，它們的 vertical-align 會相互影響，因為它們共享同一條基線。
這條基線是由文字的底部確定的。如果元素的高度或對齊方式不同，則可能會導致這些元素在垂直方向上對齊不一致。
解決方案：
你可以通過為所有行內元素設置相同的 vertical-align 值來確保它們在同一條基線上對齊。
例如：
.logo,
.menu {
vertical-align: middle;
}這樣所有的行內元素都會相對於基線垂直居中對齊，從而確保它們在同一行內對齊一致。
結論
vertical-align 是一個強大的工具，用於控制行內元素和行內塊元素在同一行中的垂直對齊方式。
通過掌握這個屬性，你可以靈活調整圖片、文字、圖標等元素的垂直位置，特別是在處理導航欄、圖文並排顯示、公式表示時，vertical-align 能夠提供有效的解決方案。
希望這篇文章能幫助你深入理解 vertical-align 屬性，並在實際開發中靈活運用它來解決垂直對齊問題。