CSS vertical-align 属性
示例
垂直对齐图像
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
自己动手试一试 »
定义和用法
vertical-align 属性设置元素的垂直对齐方式。
| 默认值 | baseline（基线） |
|---|---|
| 继承 | no |
| 可动画 | 是。 阅读关于 animatable 的内容 尝试 |
| 版本 | CSS1 |
| JavaScript 语法 | object.style.verticalAlign="top" 尝试 |
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| vertical-align | 1.0 | 4.0 | 1.0 | 1.0 | 4.0 |
CSS 语法
vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
属性值
| 值 | 描述 | 演示 |
|---|---|---|
| baseline（基线） | 元素与父元素的基线对齐。这是默认值 | 演示 ❯ |
| length | 通过指定的长度提高或降低元素。允许使用负值。 阅读关于长度单位的内容 | 演示 ❯ |
| % | 通过“line-height”属性的百分比提高或降低元素。允许使用负值。 | 演示 ❯ |
| sub（下标） | 元素与父元素的下标基线对齐 | 演示 ❯ |
| super | 元素与父元素的上标基线对齐 | 演示 ❯ |
| top | 元素与行上最高元素的顶部对齐 | 演示 ❯ |
| text-top | 元素与父元素字体的顶部对齐 | 演示 ❯ |
| middle（居中） | 元素位于父元素的中间 | 演示 ❯ |
| bottom | 元素与行上最低的元素对齐 | 演示 ❯ |
| text-bottom | 元素与父元素字体的底部对齐 | 演示 ❯ |
| initial | 将此属性设置为其默认值。阅读关于initial | |
| inherit | 从其父元素继承此属性。阅读关于inherit |
相关页面
CSS 教程：CSS 文本对齐
HTML DOM 参考： verticalAlign 属性
