> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# vertical-align 对齐

## 1、Demo1 案例：img 元素底部间隙问题

```html title="页面元素"
<div class="demo1">
    <img src="http://n.sinaimg.cn/games/3c3de2ce/20160105/3.jpg" />
</div>
```

```css title="CSS"
.demo1 {
    background-color: #20b2aa;
}

img {
    width: 200px;
}
```

**注：图片底部有一定高度的间隙**

![y1.png](/static/image/4-1.cf05dc0131.png)
```css title="CSS"
.demo1 {
    background-color: #20b2aa;
    font-size: 0;
}

img {
    width: 200px;
}
```

方法一：给父元素设置 **font-size: 0px** 清除底部多余间隙

```css title="CSS"
.demo1 {
    background-color: #20b2aa;
}

img {
    width: 200px;
    vertical-align: bottom;
}
```

方式二：给行 内块元素设置 **vertical-align: bottom**（**推荐使用该方法**）

![y12.png](/static/image/4-2.66b937228e.png)
## 2、Demo2 案例：img 元素居中上下留白高度不一致问题

```html title="页面布局"
<div class="demo2">
    <img src="http://n.sinaimg.cn/games/3c3de2ce/20160105/3.jpg" />
    <!-- 解决问题后续添加的占位元素 -->
    <div></div>
</div>
```

```css title="CSS"
.demo2 {
    width: 400px;
    height: 200px;
    line-height: 200px;
    background-color: #cccccc;
}

img {
    height: 190px;
    vertical-align: middle;
}
```

**注：图片上下间隙不对称**

![y1.png](/static/image/4-3.ff10363683.png)
**解决办法：**

```css title="CSS"
.demo2 {
    width: 400px;
    height: 200px;
    line-height: 200px;
    background-color: #cccccc;
    /* 1、font-size: 0px; 行内元素垂直对齐 */
    font-size: 0px;
}
```

方法一：给父元素添加 **font-size: 0px** 行内元素垂直对齐

```css title="CSS"
.demo2 {
    width: 400px;
    height: 200px;
    /* line-height: 200px; */
    background-color: #cccccc;
}

.demo2 div {
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}
```

方法二：去掉父元素的行高，添加一个与父元素等高的子元素，并设置 **vertical-align: middle**

![y12.png](/static/image/4-4.a6523d3d2a.png)
:::warning 注意

1. 兄弟元素影响父元素的基线，而图片的定位是需要父元素的基线的
2. 父元素的基线受 **vertical-align** 影响
3. 父元素的 **font-size**
4. 父元素的 **line-height**
5. 某个子元素的对齐方式

:::

## 3、Demo3 案例：行内块元素的错位问题

```html title="HTML"
<div class="d3"></div>
<div class="d3 d3b">X</div>
```

```css title="CSS"
div.d3 {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: #9acd32;
}
```

注：行内元素若没有文字的时候它的基线为元素的底部，若有文字则为内部文字的基线位置

![y1.png](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQgAAAD2CAMAAAAdx+kQAAAANlBMVEX///+azTIAAAAAABd4zTBQAAB4aQBQoDIyhS2aoBoAaSeatiAyAACMzTJkti4ARCBkRACMhRBxQ2cYAAACLUlEQVR42uzY3UrcQABA4Z3opt1qW33/l+2wPfQ2KSLq8H0QSO7CYf6SCwAAbzQ+0OUzGecJESEiRISIEBEiQkSICBEhIkSEiBARIkJEiAgRISJEhIgQESJCRIgIESEiRISIEBEiQkSICBEhIkSEiBARIkJEiAgRISJEhIgQESJCRIgIESEiRISIEBEiQkSICBEhIkSEiBARIkJEiAgRISJEhIgQESJCRIgIESEiRISIEBEiQkSICBEhIkSEiBARIkJEiAgRISJEhIgQESJCRIgIESEiRISIEBEiQryXj3+DIYQQQgghxBcL8fS8fRt313lzaN0Q47Y9PI5p336MI0uHGC/b9/n09Dx7HFk7xN8EL2cmxtohxuucFLd5HVs8xLg+/Lqemhirh7ht21wnTlg9xNi33z/HGYuHMCL+rRGPc5kYxxYPsc+d8/XU5Fg7xG02cI643DfP4WR5Gft9nfStsW+NhHGtyIFV/x+P/yBEhIgQESJCRIgIESEiRISIEBEiQkSICBEhIkSEiBARIkJEiAgRISJEhIgQESJCRIgIESEiRISIEBEiQkSICBEhIkSEiBARIkJEiAgRISJEhIgQESJCRIgIESEiRISIEBEiQkSICBEhIkSEiBARIkJEiAgRISJEhIgQESJCRIgIESEiRISIEBEiQkSICBEhIkSEiBARIkJEiAgRIf60Q8dEAAAwDIT8u+7yJpoDCUREREREREREREREpiMAgKcOffR7s2qskzMAAAAASUVORK5CYII=)
**解决办法：**

```css title="CSS"
.d3b {
    overflow: hidden;
}
```

注：给第二个包含文本的元素添加 **overflow: hidden**，元素不再出现错位

![y12.png](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARkAAACkCAMAAACU7ao6AAAAPFBMVEWazTL///8AAAAAABd4zTBQAAB4aQBQoDIyhS2azSeaoBoAaSeatiAyAACMzTIARCBkRABktjKMhRBktiekQSSFAAAB0klEQVR42uzXwU7DMBAA0WXTuEnaQin//69YAgkJZRRzAaSdOeVoPXljO55sP2WUUUaZbylDKUMpQylDKUMpQylDKUMpQylDKUMpQylDKfNrxV/2b5agjDLKKPOVMlQpmestzxG9de4fhxWSiS2nU/RaXuKwUjJxzyUirrcOdFgtmQ+T+8gsFZOJR15iG5ulYjLrPL3NY7NUTCa2zFxipGoy0fLlOUaqJuOe4f/MaZ5eY6BiMi3P8Ribp1oyW0fxPrMjs/ZB8g68J9NyCd9NO8tq+blX1nnkfCokEz9JGUoZShlKGUoZShlKGUoZShlKGUoZShlKGUoZShlKGUoZShlKGUoZShlKGUoZShlKGUoZShlKGUoZShlKGUoZShlKGUoZShlKGUoZShlKGUoZSpn3duiQCAAABIDY0b80GvEWtUVYMVPMFDPFTDFTzBQzxUwxU8wUM8VMMVPMFDPFTDFTzBQzxUwxU8wUM8VMMVPMFDPFTDFTzBQzxUwxU8wUM8VMMVPMFDPFTDFTzBQzxUwxU8wUM8VMMVPMFDPFTDFTzBQzxUwxU8wUM8VMMVMeZwYzZswcZoqZYqaYKWaKmWKmmClmiplippgpZoqZYqaYebO40j05WHpPHwAAAABJRU5ErkJggg==)
## 4、Demo4 案例：文本&行内块元素垂直居中

```html title="HTML"
<div class="demo4">
    x
    <img src="http://n.sinaimg.cn/games/3c3de2ce/20160105/3.jpg" class="img" />
    <!-- 为实现垂直居中而后添加的元素 -->
    <div></div>
</div>
```

```css title="CSS"
.demo4 {
    width: 400px;
    height: 200px;
    background-color: #add8e6;
}

.demo4 img {
    width: 320px;
    height: 180px;
    vertical-align: middle;
}
```

**注：子元素没有相对父元素居中**

![y1.png](/static/image/4-7.56ed2cf6a1.png)
**解决办法：**

```css title="CSS"
.demo4 > div {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
    background-color: bisque;
}
```

**注**：行内元素没有文字的时候它的基线为元素的底部，若有文字则为内部文字基线位置。

![y2.png](/static/image/4-8.8497693b09.png)
## 5、Demo5 案例：文本影响元素基线对齐方式

```html title="页面布局"
<div class="demo5">
    <div></div>
    <div>x</div>
</div>
```

```css title="CSS"
.demo5 {
    display: inline-block;
    /* 影响对齐方式 */
    font-size: 0px;
    background-color: #aaaaaa;
}

.demo5 > div {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: #ff1493;
}
```

图一：错位
![y1.png](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAADlCAMAAACLUtnRAAAARVBMVEX/FJOqqqrIvqPLwqkAAADEuqDGCgAACnLGFJP/FHz/EEwAAEznFJOEEJNSDYX/El8AB19SAADnDS+lBwCEAAClEpMAAC+zzMTHAAABlklEQVR42u3Y3U6DQBCA0UFXWqiCtOr7P6qabVMuS39CkznfDbfkJDO72Vi1Zv1iSQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACa9YslAQAAAAAAAAAAAAAAAAAAAAAAAAAAAACAW3qGf1gSAAAAAAAAAAAAgPsC9GW3jYh92US2KkC0ZYgYp8/3yNYRoPvabf8UPiJdR4Doy2ac8g3AGaA7lP89kK8TQIxTxgGYAbSlJFyB8x0w7MsQ+ZqdAt3h5zvSVQHqCdhnHIIK0NYrYP1clIdZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANOsXSwIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4MpeH9jLk/Y26xfrl2+thFLX0wAAAABJRU5ErkJggg==)
图二：理想状态
![y2.png](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPsAAAD7BAMAAABeXP+VAAAAD1BMVEWqqqr/FJP////IvqPLwqliHu/mAAAAoUlEQVR42u3OQQ3AIBAAwauD1kGDAhIs4F8TX77kSOAxa2A2ysn++FK9kQqPx+PxeDwej8fj8Xg8Ho/H4/F4PB6Px+PxeDwej8fj8Xg8Ho/H4/F4PB6Px+PxeDwej8fj8TOf68nd4/F4PB6Px+PxeDwej8fj8Xg8Ho/H4/F4PB6Px+PxeDwej8fj8Xg8Ho/H4/F4PB6Px+PxePxlfF+q7a0OVWNVtu96gD8AAAAASUVORK5CYII=)
:::tip 注意
对父元素添加 **font-size: 0**；去掉父元素的 **font-size: 0px** 带有字母的盒子就会错位；第二个盒子继承父元素的行高，而行高大于元素本身的高度，所以就挤出了盒子，而第一个盒子对齐的是父元素的基线，而父元素的基线被第二个盒子拉了下来。
:::