- 章节重复度20190523003
- 223
- 388字
- 2024-12-10 09:46:52
vertical-align（垂直对齐方式）
CSS vertical-align 属性用来指定行内（inline）、行内区块（inline-block）、表格单元格（table-cell）盒子的垂直对齐方式。
▼
这个属性常用来将注标显示在右上角。[1]也可以用这个属性模拟下标：H2O。
如果行内有图片，也可以用这个属性对齐文本行。
（这个图片相对文本行垂直居中）当使用弹出式注释时，插入的注释图标
垂直居中会比较美观。
▲
.super {
font-size: 0.7em;
vertical-align: super;
}
.sub {
font-size: 0.7em;
vertical-align: sub;
}
.middle {
font-size: 0.7em;
vertical-align: middle;
}
对于表格中垂直对齐：
| Browser | Layout Engine |
|---|---|
 |
大奉打更人(上标) |
|
大奉打更人(垂直居中) |
测试注标显示效果是否一致：
▼
1.1高祖少神勇[1]。隋末，尝以十二人破草贼号毋端兒数万。又龙门战[2]，尽一房箭[3]，中八十人。
▲
<p><span class="big">1.1高祖少神勇<sup class="calibre7">[1]</sup>。隋末，尝以十二人破草贼号毋端兒数万。又龙门战<sup class="calibre7">[2]</sup>，尽一房箭<sup class="calibre7">[3]</sup>，中八十人。</span></p>
——————
.big {
font-size: 1em;
}
.calibre7 {
font-size: 1em;
vertical-align: super;
}
[1] 注意 vertical-align 只对行内元素、行内块元素和表格单元格元素生效：不能用它垂直对齐块级元素。