🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# CSS vertical-align 属性 ## 实例 垂直对齐一幅图像: ``` img { vertical-align:text-top; } ``` ## 浏览器支持 所有浏览器都支持 vertical-align 属性。 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。 ## 定义和用法 vertical-align 属性设置元素的垂直对齐方式。 ### 说明 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。 | 默认值: | baseline | | --- | --- | | 继承性: | no | | --- | --- | | 版本: | CSS1 | | --- | --- | | JavaScript 语法: | _object_.style.verticalAlign="bottom" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | baseline | 默认。元素放置在父元素的基线上。 | | sub | 垂直对齐文本的下标。 | | super | 垂直对齐文本的上标 | | top | 把元素的顶端与行中最高元素的顶端对齐 | | text-top | 把元素的顶端与父元素字体的顶端对齐 | | middle | 把此元素放置在父元素的中部。 | | bottom | 把元素的顶端与行中最低的元素的顶端对齐。 | | text-bottom | 把元素的底端与父元素字体的底端对齐。 | | length | | % | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 | | inherit | 规定应该从父元素继承 vertical-align 属性的值。 | ## TIY 实例 [垂直对齐图象](/tiy/t.asp?f=csse_vertical-align) 本例演示如何在文本中垂直排列图象。 ``` <html> <head> <style type="text/css"> img.top {vertical-align:text-top} img.bottom {vertical-align:text-bottom} </style> </head> <body> <p> 这是一幅<img class="top" border="0" src="/i/eg_cute.gif" />位于段落中的图像。 </p> <p> 这是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" />位于段落中的图像。 </p> </body> </html> ``` ## 相关页面 CSS 教程:[CSS 文本](/css/css_text.asp "CSS 文本") HTML DOM 参考手册:[verticalAlign 属性](/jsref/prop_style_verticalalign.asp "HTML DOM verticalAlign 属性")