如何理解 vertical-align: -0.125em 和 vertical-align: middle 的区别? [英] How to understand the difference between vertical-align: -0.125em and 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
Aligns the middle of the element with the baseline plus half the x-height of the parent
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
Aligns the baseline of the element to the given length above the baseline of its parent. A negative value is allowed.
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 的区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
