text-align 控制塊級元素內文本或內聯元素的水平對齊，常用值有 left、right、center、justify；vertical-align 控制行內元素或表格單元格內容的垂直對齊，常用值包括 top、middle、bottom、baseline；兩者不互替且適用范圍不同，復雜對齊應結合 flex 或 grid 布局。
text-align 和 vertical-align 是 css 中常用來控制對齊方式的兩個屬性，但它們的作用對象和使用場景完全不同。簡單來說，text-align 控制的是文本或內聯元素的水平對齊方式，而 vertical-align 則用于控制行內元素或表格單元格內容的垂直對齊。
下面我們就從幾個常見用途出發，看看它們到底有什么區別、什么時候該用哪個。
text-align：控制水平對齊
text-align 主要用于設置塊級元素內部文本或內聯元素的水平對齊方式。它通常作用在父容器上，影響其所有子元素（特別是文本內容）的對齊。
立即學習“前端免費學習筆記（深入）”；
常用值包括：
- left：左對齊（默認）
- right：右對齊
- center：居中對齊
- justify：兩端對齊
比如你寫一個 div 包含幾段文字，默認是靠左對齊的。如果你希望這些文字都居中顯示，就可以這樣設置：
.container { text-align: center; }
需要注意的是，text-align 并不會影響塊級子元素本身的對齊，除非它們是內聯上下文的一部分，例如 或者設置了 display: inline-block 的元素。
vertical-align：控制垂直對齊
vertical-align 看起來像是用來做垂直居中的，但它其實只能作用于行內元素或表格單元格的內容。常見的使用場景包括圖片和文本對齊、多個 inline-block 元素之間的對齊等。
常用值有：
- top
- middle
- bottom
- baseline（默認）
比如你想讓一張圖片和旁邊的文本垂直居中對齊，可以這樣寫：
img { vertical-align: middle; }
但如果你想用它來實現一個 div 內容整體垂直居中，那就不合適了。這時候應該考慮 flex 或 grid 布局。
使用時容易混淆的點
很多人會誤以為這兩個屬性能互相替代，或者能在任何布局中使用。實際上要注意幾點：
- text-align 是針對水平方向的，vertical-align 是針對垂直方向的
- 它們都不是萬能對齊工具，各自有適用范圍
- vertical-align 只對 inline、inline-block、table-cell 類型的元素有效
- 要實現復雜的對齊效果，建議結合 flex 或 grid 布局
舉個例子：
如果你有一個 div 容器，想讓里面的文字既水平又垂直居中，光靠 text-align 和 vertical-align 是不夠的。這時候可以這樣處理：
.container { display: flex; justify-content: center; align-items: center; height: 100px; }
基本上就這些。text-align 和 vertical-align 各司其職，理解它們的適用范圍，才能在不同布局需求下正確選擇。
以上就是CSS中text-align和vertical-align的對齊方式<a
