vertical-align

该属性用来指定行内元素活着表格单元格元素的垂直对齐方式。

 

语法

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: <length>;
vertical-align: <percentage> ;
vertical-align: top;
vertical-align: bottom;

值

值描述
baseline 此关键词表示元素基线与父元素的基线对齐。
sub 此关键词表示元素基线与父元素的下标基线对齐。
super 此关键词表示元素基线与父元素的上标基线对齐。
text-top 此关键词表示元素顶端与父元素字体的顶端对齐。
text-bottom 此关键词表示元素底端与父元素字体的底端对齐。
middle 此关键词表示元素中线与父元素的小写x中线对齐。
<length> 此关键词表示元素基线超过父元素的基线指定高度。可以取负值。
<percentage> 此关键词表示同 <length> , 百分比相对于 line-height 。
top 此关键词表示元素及其后代的顶端与整行的顶端对齐。
bottom 此关键词表示元素及其后代的底端与整行的底端对齐。

例子

HTML 

<div id="red">
   <p id="orange">Hudaokeji.</p>
</div>

CSS 

#red {
     width: 200px;
     height: 200px;
     background: red;
}
#orange {
     width: 150px;
     height: 100px;
     background: orange;
}
img.hudao {
     width: 40px;
     height: 40px;
     vertical-align: text-bottom;
}

执行结果

Hudaokeji.

参考

相关链接

外部链接


跳至内容顶部