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.