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

本文介绍了如何理解 vertical-align: -0.125em 和 vertical-align: middle 的区别?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

解决方案

vertical-align:middle 表示

将元素的中间与基线加上父元素 x 高度的一半对齐

所以你需要找到元素的middle、基线和x高度的一半(由ex单位定义).

这是一个例子:

.box {字体大小:50px；背景:线性渐变(绿色，绿色)0 46px/100% 2px 不重复；}.box >跨度 {显示:内联块；宽度:30px；高度:30px；背景:线性渐变(黑色，黑色)中心/100% 2px 不重复，线性渐变(红色，红色)0 计算(50% + 0.5ex)/100% 1px 不重复，黄色;垂直对齐:中间；}


一些文本 j <span></span>

绿线是基线，span元素上的黑线是中间.我们将中间偏移 x 高度的一半(红线)

vertical-align: -0.125em 是 vertical-align: 表示

将元素的基线与其父元素基线上方的给定长度对齐.允许使用负值.

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

.box {字体大小:50px；背景:线性渐变(绿色，绿色)0 46px/100% 2px 不重复；}.box >跨度 {显示:内联块；字体大小:20px；宽度:30px；高度:30px；背景:线性渐变(黑色，黑色)0 18px/100% 2px 不重复，线性渐变(红色，红色)0 计算(18px - 0.125em)/100% 1px 不重复，黄色;垂直对齐:-0.125em；}


一些文本 j <span>aq</span>

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

.box {字体大小:50px；背景:线性渐变(绿色，绿色)0 46px/100% 2px 不重复；}.box >跨度 {显示:内联块；字体大小:20px；宽度:30px；高度:30px；背景:线性渐变(红色，红色)左 0 底部 0.5em/100% 1px 不重复，黄色;垂直对齐:-0.5em；}


一些文本 j <span></span>

如果元素有overflow:hidden

，它也是底部

.box {字体大小:50px；背景:线性渐变(绿色，绿色)0 46px/100% 2px 不重复；}.box >跨度 {显示:内联块；溢出:隐藏；字体大小:20px；宽度:30px；高度:30px；背景:线性渐变(红色，红色)左 0 底部 0.5em/100% 1px 不重复，黄色;垂直对齐:-0.5em；}


一些文本 j <span></span><span>aq</span>

如果我们处理图像或 SVG，这也是最底层

.box {字体大小:50px；背景:线性渐变(绿色，绿色)0 46px/100% 2px 不重复；}.box >跨度 {显示:内联块；溢出:隐藏；字体大小:20px；宽度:30px；高度:30px；背景:线性渐变(红色，红色)左 0 底部 0.5em/100% 1px 不重复，黄色;垂直对齐:-0.5em；}.box >图像{垂直对齐:-0.5em；}


一些文本 j <span></span><span>aq</span><img src="https://picsum.photos/id/100/30/30" >

注意图像如何不对齐，因为 em 将考虑父 font-size 50px 与将考虑的 span 元素不同他们自己的font-size.使用 px 并且它们会对齐:

.box {字体大小:50px；背景:线性渐变(绿色，绿色)0 46px/100% 2px 不重复；}.box >跨度 {显示:内联块；溢出:隐藏；字体大小:20px；宽度:30px；高度:30px；背景:线性渐变(红色，红色)左 0 底部 10px/100% 1px 不重复，黄色;垂直对齐:-10px；}.box >图像{垂直对齐:-10px；}


一些文本 j <span></span><span>aq</span><img src="https://picsum.photos/id/100/30/30" >

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

I see the code vertical-align: -0.125em;, and think about what's the difference between it and vertical-align:middle?

解决方案

vertical-align:middle means

So you need to find the middle of your element, the baseline and half the x-height (defined by the ex unit).

Here is an example:

.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>

The green line is the basline, the black one on the span element is the middle. We offset the middle by half the x-height (the red line)

vertical-align: -0.125em is vertical-align: <length> means

Here it's the basline of the element against the baseline of the parent considering an offset:

.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>

Note that in some cases the baseline is a bit tricky to find. For an empty element the baseline is the bottom of the element:

.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>

It's also the bottom if the element is having 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>

It's also the bottom if we deal with an image or 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>

Note how the image is not aligned the same because em will consider the parent font-size 50px unlike the span elements that will consider their own font-size. Use px and they will align the same:

.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>

To conclude, there is no explicit relation between middle and -0.125em since both have different definition and don't use the same references. It may happen that both give the same alignment in some particular cases but it doesn't mean they are equivalent.

这篇关于如何理解 vertical-align: -0.125em 和 vertical-align: middle 的区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！