当前阅读教程:CSS入门到精通 > 元素垂直对齐 vertical-align | |||||||||||||||||||||||||||||||||
阅读(22555525) 收藏 赞(5685) 分享 | |||||||||||||||||||||||||||||||||
上一篇: 文本是否被重写 unicode-bidi | 下一篇: 元素中空白的处理方式 white-space | ||||||||||||||||||||||||||||||||
浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。 属性定义及使用说明vertical-align 属性设置一个元素的垂直对齐方式。 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
属性值
示例代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>元素垂直对齐 vertical-align</title> <!--定义内部样式--> <style> .css01{ vertical-align: text-top;/*把元素的顶端与父元素字体的顶端对齐*/ } .css02{ vertical-align: middle;/*把此元素放置在父元素的中部。*/ } .css03{ vertical-align: text-bottom;/*把元素的底端与父元素字体的底端对齐。*/ } </style> </head> <body> <p> <img src="img/paper.jpg"> 默认对齐的图像 </p> <p> <img src="img/paper.jpg"> text-top 对齐图像的顶部 </p> <p> <img src="img/paper.jpg"> middle 对齐图像的中部 </p> <p> <img src="img/paper.jpg"> text-bottom 对齐图像的底部 </p>
</body> </html> 效果图 |
|||||||||||||||||||||||||||||||||
上一篇: 文本是否被重写 unicode-bidi | 下一篇: 元素中空白的处理方式 white-space |