vertical-align学习笔记

发表于 | 更新于 | 分类于

vertical-align

设置元素相对于该元素所在行的垂直对齐方式。
当元素为inline或inline-block 时vertical-align属性才会起作用。

vertical-align属性

  • baseline：默认 元素放置在父元素的基线上。
  • sub：对齐父元素文本下标。
  • super：对齐父元素文本上标。
  • top：把元素的顶端与行内最高元素顶端对齐。
  • middle：把元素放置在父元素的中线上。
  • bottom：把元素的底端与行中最低元素的顶端对齐。
  • text-top：把元素的顶端与父元素字体的顶端对齐。
  • text-bottom：把元素的底端与父元素字体的底端对齐。
  • length： 通过长度升高降低元素 0px为baseline。
  • %：通过百分比升高降低元素 0%为baseline。

数值

vertical-align 取值为数值时为元素相当于基线升高下降一定长度。

vertical-align分别为 10px 与 -10px。

1
2
3
4
<body>
    <span class="text">text</span>
    <img src="box.png">
</body>

1
2
3
4
5
6
span {
    font-size: 30px;
    color: #fff;
    background: #b72afc;}
img {
    vertical-align: -10px;}
1
2
3
4
5
6
span {
    font-size: 30px;
    color: #fff;
    background: #b72afc;}
img {
    vertical-align: -10px;}

百分比

vertical-align 取值为百分比时相对于自身继承的line-height决定。
如果line-height取值为百分比，则line-height是相对于font-size决定。


vertical-align设置为50%。

1
2
3
4
<body>
    <span class="text">text</span>
    <img src="box.png">
</body>

1
2
3
4
5
6
7
span {
    font-size: 30px;
    color: #fff;
    background: #b72afc;
    line-height: 20px;}
img {
    vertical-align: 50%;}  /*vertical-align:20px*50%=10px*/