PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, November 17, 2022

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

 November 17, 2022     css, vertical-alignment     No comments   

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)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing