如何理解 vertical-align: -0.125em 和 vertical-align: middle 的区别？

Question

看到代码vertical-align: -0.125em;，想想它和vertical-align:middle有什么区别？

Answer 1

vertical-align:middle表示

Aligns the middle of the element with the baseline plus half the x-height of the parent

所以你需要找到元素的middle，基线和x-height的一半（由ex单位定义）。

这是一个例子：

.box {
  font-size:50px;
  background:
    linear-gradient(green,green) 0 46px/100% 2px no-repeat;
}

.box > span {
  display:inline-block;
  width:30px;
  height:30px;
  background:
    linear-gradient(black,black) center/100% 2px no-repeat,
    linear-gradient(red,red) 0 calc(50% + 0.5ex)/100% 1px no-repeat,
    yellow;
  vertical-align:middle;
}

<div class="box">
Some text j <span></span>
</div>

绿线是底线，span 元素上的黑线是中间线。我们将中间偏移 x 高度的一半（红线）

vertical-align: -0.125em是vertical-align: <length>的意思是

Aligns the baseline of the element to the given length above the baseline of its parent. A negative value is allowed.

这是元素的基线相对于考虑偏移的父基线的基线：

.box {
  font-size:50px;
  background:
    linear-gradient(green,green) 0 46px/100% 2px no-repeat;
}

.box > span {
  display:inline-block;
  font-size:20px;
  width:30px;
  height:30px;
  background:
    linear-gradient(black,black) 0 18px/100% 2px no-repeat,
    linear-gradient(red,red) 0 calc(18px - 0.125em)/100% 1px no-repeat,
    yellow;
  vertical-align:-0.125em;
}

<div class="box">
Some text j <span>aq</span>
</div>

请注意，在某些情况下，基线很难找到。对于空元素，基线是元素的底部：

.box {
  font-size:50px;
  background:
    linear-gradient(green,green) 0 46px/100% 2px no-repeat;
}

.box > span {
  display:inline-block;
  font-size:20px;
  width:30px;
  height:30px;
  background:
    linear-gradient(red,red) left 0 bottom 0.5em/100% 1px no-repeat,
    yellow;
  vertical-align:-0.5em;
}

<div class="box">
Some text j <span></span>
</div>

如果元素有 overflow:hidden

，它也是底部

.box {
  font-size:50px;
  background:
    linear-gradient(green,green) 0 46px/100% 2px no-repeat;
}

.box > span {
  display:inline-block;
  overflow:hidden;
  font-size:20px;
  width:30px;
  height:30px;
  background:
    linear-gradient(red,red) left 0 bottom 0.5em/100% 1px no-repeat,
    yellow;
  vertical-align:-0.5em;
}

<div class="box">
Some text j <span></span> <span>aq</span>
</div>

如果我们处理图像或SVG，它也是底部

.box {
  font-size:50px;
  background:
    linear-gradient(green,green) 0 46px/100% 2px no-repeat;
}

.box > span {
  display:inline-block;
  overflow:hidden;
  font-size:20px;
  width:30px;
  height:30px;
  background:
    linear-gradient(red,red) left 0 bottom 0.5em/100% 1px no-repeat,
    yellow;
  vertical-align:-0.5em;
}

.box > img {
  vertical-align:-0.5em;
}

<div class="box">
Some text j <span></span> <span>aq</span> <img src="https://picsum.photos/id/100/30/30" >
</div>

请注意图像的对齐方式不同，因为 em 会考虑父 font-size 50px，而 span 元素会考虑自己的 font-size。使用 px 它们将对齐相同：

.box {
  font-size:50px;
  background:
    linear-gradient(green,green) 0 46px/100% 2px no-repeat;
}

.box > span {
  display:inline-block;
  overflow:hidden;
  font-size:20px;
  width:30px;
  height:30px;
  background:
    linear-gradient(red,red) left 0 bottom 10px/100% 1px no-repeat,
    yellow;
  vertical-align:-10px;
}

.box > img {
  vertical-align:-10px;
}

<div class="box">
Some text j <span></span> <span>aq</span> <img src="https://picsum.photos/id/100/30/30" >
</div>

总而言之，middle 和 -0.125em 之间没有明确的关系，因为两者有不同的定义并且不使用相同的引用。在某些特定情况下，两者可能会给出相同的对齐方式，但这并不意味着它们是等价的。

如何理解 vertical-align: -0.125em 和 vertical-align: middle 的区别？

How to understand the difference between vertical-align: -0.125em and vertical-align: middle?

css

vertical-alignment