32 lines
1.3 KiB
Markdown
32 lines
1.3 KiB
Markdown
|
---
|
|||
|
|
title: Vertical Align CSS
|
|||
|
|
localeTitle: 垂直对齐CSS
|
|||
|
|
---
|
|||
|
|
## 垂直对齐
|
|||
|
|
|
|||
|
|
`vertical-align`是用于垂直对齐图像的CSS属性。
|
|||
|
|
|
|||
|
|
例如，您可以像这样`vertical-align`以对齐图像：
|
|||
|
|
```
|
|||
|
|
img {
|
|||
|
|
vertical-align: top;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
这些是`vertical-align`的有效值：
|
|||
|
|
|
|||
|
|
* `baseline` - 这是默认值。它将元素与父元素的基线对齐
|
|||
|
|
* `length` - 这将在父元素基线之上或之下的给定长度上对此元素的基线进行分配。你可以使用pixals，em，％等。
|
|||
|
|
* `sub` - 这将元素对齐，就好像它是父元素的下标一样
|
|||
|
|
* `super` - 这将元素对齐，就像它是父元素的上标一样
|
|||
|
|
* `top` - 这会对齐元素，使此元素的顶部与线上最高元素的顶部对齐
|
|||
|
|
* `bottom` - 这会对齐元素，使此元素的底部与线上最低元素的底部对齐
|
|||
|
|
* `middle` - 这将对齐元素，使其位于父元素的中间
|
|||
|
|
* `text=top` - 这会对齐此元素的顶部，使其与父元素顶部的顶部对齐
|
|||
|
|
* `text-bottom` - 这将对齐此元素的底部，使其与父元素文本的底部对齐
|
|||
|
|
|
|||
|
|
#### 更多信息：
|
|||
|
|
|
|||
|
|
* [CSS vertical-align](https://www.w3schools.com/cssref/pr_pos_vertical-align.asp)
|
|||
|
|
|
|||
|
|
* [CSS-Tricks垂直对齐](https://css-tricks.com/almanac/properties/t/text-align/)
|