vertical-align詳解

一、vertical-align 的作用與適用元素

1. 作用

vertical-align 用于控制 行內(nèi)元素（inline） 或 表格單元格（table-cell） 的 垂直對齊方式。
不適用于塊級元素（除非通過 display 轉(zhuǎn)換為行內(nèi)塊或表格元素）。

2. 適用元素

• 行內(nèi)元素：<span>、<img>、<input>、<button> 等。
• 表格單元格：<td>、<th>。
• 行內(nèi)塊元素：display: inline-block 的元素。

二、vertical-align 的屬性值

1. 關(guān)鍵字值

2. 長度值與百分比

• 長度值：如 vertical-align: 10px，元素相對于基線向上或向下偏移。
• 百分比：基于元素的 line-height 計(jì)算偏移量，如 vertical-align: 50%。

三、核心使用場景

1. 行內(nèi)元素與文本對齊

<span class="icon">▲</span>
<span class="text">Top</span>

.icon {
  vertical-align: middle; /* 圖標(biāo)與文本垂直居中 */
}

2. 圖片與文字對齊

<img src="logo.png" class="logo"> CSS Logo

.logo {
  vertical-align: middle; /* 圖片與文字垂直居中 */
}

3. 表格單元格內(nèi)容對齊

<table>
  <tr>
    <td class="cell">Content</td>
  </tr>
</table>

.cell {
  vertical-align: middle; /* 單元格內(nèi)容垂直居中 */
}

四、常見問題與解決方案

1. 圖片底部間隙問題

• 現(xiàn)象：<img> 下方出現(xiàn)空隙。
• 原因：圖片默認(rèn)對齊到基線（baseline），與父元素基線下的預(yù)留空間產(chǎn)生間隙。
• 解決：

img {
  vertical-align: bottom; /* 或 middle/top */
  /* 或 display: block; */
}

2. vertical-align 對塊級元素?zé)o效

• 現(xiàn)象：設(shè)置 vertical-align: middle 的 <div> 未垂直居中。
• 原因：塊級元素默認(rèn) display: block，不支持 vertical-align。
• 解決：

.block {
  display: inline-block; /* 或 table-cell */
  vertical-align: middle;
}

3. 多行元素對齊混亂

• 現(xiàn)象：多行文本或元素垂直對齊不一致。
• 解決：統(tǒng)一設(shè)置 vertical-align 或調(diào)整 line-height。

.container {
  line-height: 1.5; /* 確保行高一致 */
}
.item {
  vertical-align: middle;
}

五、與其他屬性的協(xié)作

1. 與 line-height 配合

line-height 控制行高，影響 vertical-align 的基線位置。

示例：單行文本垂直居中：

.button {
  height: 40px;
  line-height: 40px; /* 行高 = 容器高度 */
}

2. 與 display: table-cell 配合

實(shí)現(xiàn)塊級元素的垂直居中：

.parent {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
}

六、總結(jié)

line-height詳解  

一、line-height 的核心作用

line-height 用于控制 行框（line box）的高度，直接影響以下布局效果：

• 文本垂直居中：單行文字在容器內(nèi)垂直居中。
• 行間距調(diào)整：多行文字之間的間距（行高）。
• 布局計(jì)算：參與元素高度計(jì)算，影響 height 和 vertical-align 的行為。

二、line-height 的語法與單位

line-height 支持多種單位或數(shù)值形式：

單位對比示例

.parent {
  font-size: 16px;
  line-height: 1.5;      /* 子元素繼承 1.5，計(jì)算為 1.5 * 子元素自身的 font-size */
}
.parent-percent {
  font-size: 16px;
  line-height: 150%;     /* 子元素繼承計(jì)算后的 24px（1.5 * 16px） */
}

三、line-height 的繼承規(guī)則

• 無單位數(shù)值：子元素繼承數(shù)值，最終行高基于子元素的 font-size。
• 百分比/長度單位：子元素繼承計(jì)算后的像素值，與父元素的 font-size 綁定。

繼承差異示例

<div class="parent">
  <div class="child">Text</div>
</div>

.parent {
  font-size: 16px;
  line-height: 1.5;      /* 繼承的是 1.5 */
}
.child {
  font-size: 24px;       /* 實(shí)際行高：1.5 * 24px = 36px */
}

.parent-percent {
  font-size: 16px;
  line-height: 150%;     /* 計(jì)算為 24px */
}
.child-percent {
  font-size: 24px;       /* 實(shí)際行高：24px（繼承父元素計(jì)算后的值） */
}

什么情況下 line-height 能實(shí)現(xiàn)垂直居中？

line-height 僅在以下場景有效：

• 單行文本：元素內(nèi)只有一行文本（無換行）。
• 行內(nèi)內(nèi)容：子元素是 inline 或 inline-block 元素。
• 容器高度等于行高：容器高度與 line-height 值相同。

正確示例：單行文本居中

<div class="text">單行文本</div>
<style>
.text {
  height: 100px;
  line-height: 100px;  /* 有效：文本垂直居中 */
}
</style>

四、解決方案：讓多行內(nèi)容垂直居中

方法 1：Flex 布局（推薦）

.goods .bd .text {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* 垂直居中 */
}

方法 2：轉(zhuǎn)換為行內(nèi)塊元素

.goods .bd .text {
  height: 100px;
  line-height: 100px;  /* 父容器行高 */
}
.goods .bd .text h4,
.goods .bd .text p {
  display: inline-block;  /* 轉(zhuǎn)為行內(nèi)塊 */
  vertical-align: middle; /* 垂直對齊 */
  line-height: normal;    /* 重置行高 */
}

方法 3：調(diào)整子元素行高

.goods .bd .text {
  height: 100px;
}
.goods .bd .text h4,
.goods .bd .text p {
  line-height: 50px;  /* 總高度 100px / 2 行 = 50px */
}

五、line-height 的實(shí)際應(yīng)用

1. 單行文本垂直居中

通過設(shè)置容器高度等于 line-height 實(shí)現(xiàn)居中：

.button {
  height: 40px;
  line-height: 40px;     /* 文本垂直居中 */
}

2. 多行文本行間距控制

.article {
  line-height: 1.6;      /* 增加行間距提升可讀性 */
}

3. 與 vertical-align 配合使用

調(diào)整行內(nèi)元素（如圖標(biāo)、文字）的垂直對齊：

.icon {
  vertical-align: middle; /* 基于行高居中 */
}

4. 重置瀏覽器默認(rèn)行高

body {
  line-height: 1.5;      /* 覆蓋瀏覽器默認(rèn)值（通常 1.2） */
}

六、常見問題與解決方案

1. 行高計(jì)算不符合預(yù)期

• 原因：使用百分比或長度單位導(dǎo)致繼承值固定。
• 解決：優(yōu)先使用 無單位數(shù)值（如 1.5）。

2. 行內(nèi)元素對齊偏差

• 原因：vertical-align 的基準(zhǔn)是行高，未正確設(shè)置。
• 解決：統(tǒng)一行高或調(diào)整 vertical-align 值。

3. 行高影響布局高度

• 原因：行高大于 font-size 時，元素高度由行高決定。
• 解決：顯式設(shè)置容器高度或使用 flex 布局。

到此這篇關(guān)于css中的 vertical-align與line-height的文章就介紹到這了,更多相關(guān)css vertical-align與line-height內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論