Issue
I see the code vertical-align: -0.125em;
, and think about what's the difference between it and vertical-align:middle
?
Solution
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.
Answered By - Temani Afif Answer Checked By - Timothy Miller (PHPFixing Admin)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.