1

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

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
rod chen
  • 13
  • 3
  • There are the same view among the two code. – rod chen Sep 07 '19 at 03:23
  • Does MDN documentation help? https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align If not, explain with more details. – ctaleck Sep 07 '19 at 04:54
  • @ChristopherTaleck There are the img element and span element in one span element, and we can set style 'vertical-align:middle' on the img element to let img align with the inner span. But i see someone use the code 'vertical-align: -0.125em;' to replace of 'vertical-align:middle', so i want to know why. – rod chen Sep 07 '19 at 05:56
  • 1
    I'm sorry, there could be many reasons why they used it for your particular situation. Perhaps the -0.125em measurement just so happens to match the middle alignment. – ctaleck Sep 07 '19 at 06:31
  • Yes, it is relation to line-height. Because different browser has different manifestation. Maybe the numerical value ‘-0.125’ is one appropriate way to let the img align width center. – rod chen Sep 07 '19 at 09:38
  • More one words, the 'vertical-align: -0.125em;' has different way width 'vertical-align:middle'. – rod chen Sep 07 '19 at 09:39

1 Answers1

2

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.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415