在前端开发中，排版是一个常见的问题，特别是对于居中对齐、水平对齐、垂直对齐等。而在 CSS 中，vertical-align 属性是一个重要的对齐属性，其作用是设置行内元素或表格单元格的垂直对齐方式。本文将详细介绍 vertical-align 属性的使用方法，帮助大家实现完美排版。

一、基本语法

首先，我们来看一下 vertical-align 属性的基本语法：

vertical-align: baseline | top | middle | bottom | text-top | text-bottom | % | length | inherit;

其中，可以设置的值包括：

- baseline：让元素的基线（baseline）与父元素的基线对齐。

- top：让元素的顶部与父元素的顶部对齐。

- middle：让元素的中部与父元素的基线居中对齐。

- bottom：让元素的底部与父元素的底部对齐。

- text-top：让元素的顶部与父元素的字体顶部对齐。

- text-bottom：让元素的底部与父元素的字体底部对齐。

- %：使用相对于行高的百分比值进行垂直对齐。可以是负值。

- length：使用固定的长度值进行垂直对齐。

- inherit：从父元素继承 vertical-align 属性的值。

二、在行内元素中使用

首先，我们来看一下在行内元素中使用 vertical-align 属性。

1. baseline

当行内元素设置 vertical-align: baseline; 时，元素的基线将与父元素的基线对齐。如下图所示：

代码如下：

```html

• 测试文字一
• 测试文字二

```

```css

ul {

font-size: 30px;

}

.baseline-1 {

font-size: 20px;

vertical-align: baseline;

}

.baseline-2 {

font-size: 40px;

vertical-align: baseline;

}

```

2. top

当行内元素设置 vertical-align: top; 时，元素的顶部将与父元素的顶部对齐。如下图所示：

代码如下：

```html

• 测试文字一
• 测试文字二

```

```css

ul {

font-size: 30px;

}

.top-1 {

font-size: 20px;

vertical-align: top;

}

.top-2 {

font-size: 40px;

vertical-align: top;

}

```

3. middle

当行内元素设置 vertical-align: middle; 时，元素的中部将与父元素的基线居中对齐。如下图所示：

代码如下：

```html

• 测试文字一
• 测试文字二

```

```css

ul {

font-size: 30px;

}

.middle-1 {

font-size: 20px;

vertical-align: middle;

}

.middle-2 {

font-size: 40px;

vertical-align: middle;

}

```

4. bottom

当行内元素设置 vertical-align: bottom; 时，元素的底部将与父元素的底部对齐。如下图所示：

代码如下：

```html

• 测试文字一
• 测试文字二

```

```css

ul {

font-size: 30px;

}

.bottom-1 {

font-size: 20px;

vertical-align: bottom;

}

.bottom-2 {

font-size: 40px;

vertical-align: bottom;

}

```

5. text-top

当行内元素设置 vertical-align: text-top; 时，元素的顶部将与父元素的字体顶部对齐。如下图所示：

代码如下：

```html

• 测试文字一
• 测试文字二

```

```css

ul {

font-size: 30px;

}

.text-top-1 {

font-size: 20px;

vertical-align: text-top;

}

.text-top-2 {

font-size: 40px;

vertical-align: text-top;

}

```

6. text-bottom

当行内元素设置 vertical-align: text-bottom; 时，元素的底部将与父元素的字体底部对齐。如下图所示：

代码如下：

```html

• 测试文字一
• 测试文字二

```

```css

ul {

font-size: 30px;

}

.text-bottom-1 {

font-size: 20px;

vertical-align: text-bottom;

}

.text-bottom-2 {

font-size: 40px;

vertical-align: text-bottom;

}

```

7. % 和 length

当行内元素设置 vertical-align: 50%; 时，元素的中部将与父元素的基线居中对齐，与前面的 middle 效果相同。

当行内元素设置 vertical-align: 20px; 时，元素的底部将与父元素的基线相差 20px，如下图所示：

代码如下：

```html