CSS教程

关注公众号 jb51net

关闭
网页制作 > CSS > CSS教程 >

css中的 vertical-align与line-height作用详解

旺代

vertical-align详解

一、vertical-align 的作用与适用元素

1. 作用

vertical-align 用于控制 行内元素（inline） 或 表格单元格（table-cell） 的 垂直对齐方式。
不适用于块级元素（除非通过 display 转换为行内块或表格元素）。

2. 适用元素

二、vertical-align 的属性值

1. 关键字值

值描述
baseline默认值，元素基线与父元素基线对齐
top元素顶部与行框顶部对齐
middle元素中线与父元素基线加半 x-height 对齐（近似垂直居中）
bottom元素底部与行框底部对齐
text-top元素顶部与父元素文本顶部对齐
text-bottom元素底部与父元素文本底部对齐

2. 长度值与百分比

三、核心使用场景

1. 行内元素与文本对齐

<span class="icon">▲</span>
<span class="text">Top</span>
.icon {
  vertical-align: middle; /* 图标与文本垂直居中 */
}

2. 图片与文字对齐

<img src="logo.png" class="logo"> CSS Logo
.logo {
  vertical-align: middle; /* 图片与文字垂直居中 */
}

3. 表格单元格内容对齐

<table>
  <tr>
    <td class="cell">Content</td>
  </tr>
</table>
.cell {
  vertical-align: middle; /* 单元格内容垂直居中 */
}

四、常见问题与解决方案

1. 图片底部间隙问题

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

2. vertical-align 对块级元素无效

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

3. 多行元素对齐混乱

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

五、与其他属性的协作

1. 与 line-height 配合

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

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

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

2. 与 display: table-cell 配合

实现块级元素的垂直居中：

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

六、总结

关键点说明
适用元素行内元素、行内块元素、表格单元格
默认值baseline（基线对齐）
常见用途图片与文字对齐、表格内容垂直居中、行内元素对齐
典型问题图片底部间隙、块级元素无效、多行对齐混乱
协作属性line-height、display

line-height详解  

一、line-height 的核心作用

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

二、line-height 的语法与单位

line-height 支持多种单位或数值形式：

类型示例计算方式推荐场景
无单位数值line-height: 1.5基于当前元素的 font-size 计算（1.5 * font-size）通用（继承友好）
百分比line-height: 150%基于当前元素的 font-size 计算（1.5 * font-size）特定比例需求
长度单位line-height: 24px直接指定固定值（24px）精确控制行高
全局关键字line-height: normal浏览器默认值（通常约 1.2，取决于字体和浏览器）重置自定义行高

单位对比示例

.parent {
  font-size: 16px;
  line-height: 1.5;      /* 子元素继承 1.5，计算为 1.5 * 子元素自身的 font-size */
}
.parent-percent {
  font-size: 16px;
  line-height: 150%;     /* 子元素继承计算后的 24px（1.5 * 16px） */
}

三、line-height 的继承规则

继承差异示例

<div class="parent">
  <div class="child">Text</div>
</div>
.parent {
  font-size: 16px;
  line-height: 1.5;      /* 继承的是 1.5 */
}
.child {
  font-size: 24px;       /* 实际行高：1.5 * 24px = 36px */
}
.parent-percent {
  font-size: 16px;
  line-height: 150%;     /* 计算为 24px */
}
.child-percent {
  font-size: 24px;       /* 实际行高：24px（继承父元素计算后的值） */
}

什么情况下 line-height 能实现垂直居中？

line-height 仅在以下场景有效：

正确示例：单行文本居中

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

四、解决方案：让多行内容垂直居中

方法 1：Flex 布局（推荐）

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

方法 2：转换为行内块元素

.goods .bd .text {
  height: 100px;
  line-height: 100px;  /* 父容器行高 */
}
.goods .bd .text h4,
.goods .bd .text p {
  display: inline-block;  /* 转为行内块 */
  vertical-align: middle; /* 垂直对齐 */
  line-height: normal;    /* 重置行高 */
}

方法 3：调整子元素行高

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

五、line-height 的实际应用

1. 单行文本垂直居中

通过设置容器高度等于 line-height 实现居中：

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

2. 多行文本行间距控制

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

3. 与 vertical-align 配合使用

调整行内元素（如图标、文字）的垂直对齐：

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

4. 重置浏览器默认行高

body {
  line-height: 1.5;      /* 覆盖浏览器默认值（通常 1.2） */
}

六、常见问题与解决方案

1. 行高计算不符合预期

2. 行内元素对齐偏差

3. 行高影响布局高度

到此这篇关于css中的 vertical-align与line-height的文章就介绍到这了,更多相关css vertical-align与line-height内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！