CSS vertical-align 属性 | CSS 文本格式 | CSS教程

返回到:CSS 文本格式 | CSS教程

属性定义及使用说明

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 属性的值。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性谷歌IE火狐苹果opera
vertical-align1.03.01.01.03.5

实例

垂直对齐图像:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Web176教程(web176.com)</title> 
<style>
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>

<body>
<p>一个<img src="/images/logo.svg" alt="web176" width="270" height="50" />默认对齐的图像。</p> 
<p>一个<img class="top" src="/images/logo.svg" alt="web176" width="270" height="50" />  text-top 对齐的图像。</p> 
<p>一个<img class="bottom" src="/images/logo.svg" alt="web176" width="270" height="50" /> text-bottom 对齐的图像。</p>
</body>
</html>

作者:terry,如若转载,请注明出处:https://www.web176.com/cssprop/5743.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2022年4月22日 下午2:07
下一篇 2022年4月22日 下午2:26

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注