vertical-align如何使用
时间: 2023-11-26 07:59:27 浏览: 38
`vertical-align` 是 CSS 中用来设置元素垂直对齐方式的属性。它可以用于块级元素和表格单元格元素。
以下是 `vertical-align` 的使用方法:
1. 对于行内元素,可以使用以下值:
- `baseline`:默认值,基线对齐。
- `top`:元素顶部与行顶对齐。
- `middle`:元素垂直居中对齐。
- `bottom`:元素底部与行底对齐。
- `text-top`:元素顶部与父元素字体的顶部对齐。
- `text-bottom`:元素底部与父元素字体的底部对齐。
- `<length>`:以长度值作为元素的垂直偏移量。
2. 对于表格单元格元素,可以使用以下值:
- `baseline`:默认值,基线对齐。
- `top`:元素顶部与单元格顶部对齐。
- `middle`:元素垂直居中对齐。
- `bottom`:元素底部与单元格底部对齐。
- `<length>`:以长度值作为元素的垂直偏移量。
以下是一个例子:
```html
<div style="display: inline-block; width: 100px; height: 100px; border: 1px solid black;">
<span style="display: inline-block; width: 50px; height: 50px; background-color: red; vertical-align: middle;"></span>
<span style="display: inline-block; width: 50px; height: 50px; background-color: blue; vertical-align: middle;"></span>
</div>
```
在上面的例子中,两个红色和蓝色的方块元素被包含在一个内联块级元素中,这个元素设置了 `vertical-align: middle`,使得两个子元素在该元素垂直居中对齐。