Why are s also center vertically when making center vertically? （'s line-height not equals to its parent height）

Question

Notice: height of <div> is 50px, and line-height of <span> is also 50px

when don't apply 'line-height' to <span>, all elements align to the top of parent, when apply 'line-height: 50px' to <span>, why all elements be center vertically?

<div class="block">
  <input type="text" class="inline-block-input">
  <span class="inline-block-text">*</span>
  <input type="text" class="inline-block-input">
</div>

<style>
  .block {
    display: block;
    width: 500px;
    height: 50px;
    border: 1px solid red;
  }
  
  .inline-block-input {
    display: inline-block;
    width: 100px;
    height: 30px;
    line-height: 30px;
  }
  
  .inline-block-text {
    display: inline-block;
    width: 50px;
    text-align: center;
    height: 30px;
    line-height: 50px;
  }
</style>

Temani Afif · Answer 1 · 2019-12-10T12:29:17.137

To understand what is happening add some text inside the input:

.block {
  display: block;
  width: 500px;
  height: 50px;
  border: 1px solid red;
  background: linear-gradient(blue, blue) 0 31px/100% 1px no-repeat;
}

.inline-block-input {
  display: inline-block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  background: transparent;
  border:1px solid;
}

.inline-block-text {
  display: inline-block;
  width: 50px;
  text-align: center;
  height: 30px;
  line-height: 50px;
  border:1px solid green;
}

<div class="block">
  <input type="text" class="inline-block-input" value="text">
  <span class="inline-block-text">*bc</span>
  <input type="text" class="inline-block-input" value="text">
</div>

Notice how all the text are aligned the same way due to the fact that the default vertical alignment is baseline. Your element seems to be centred but they are not. They are aligned following the baseline alignment and as a side effect you have your centring.

Change the alignment of the element and you will have a different behavior:

.block {
  display: block;
  width: 500px;
  height: 50px;
  border: 1px solid red;
  background: linear-gradient(blue, blue) 0 31px/100% 1px no-repeat;
}

.inline-block-input {
  display: inline-block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  background: transparent;
  border:1px solid;
  vertical-align:top;
}

.inline-block-text {
  display: inline-block;
  width: 50px;
  text-align: center;
  height: 30px;
  line-height: 50px;
  border:1px solid green;
}

<div class="block">
  <input type="text" class="inline-block-input" value="text">
  <span class="inline-block-text">*bc</span>
  <input type="text" class="inline-block-input" value="text">
</div>

And without line-height on the span you will still have the baseline alignment:

.block {
  display: block;
  width: 500px;
  height: 50px;
  border: 1px solid red;
  background: linear-gradient(blue, blue) 0 21px/100% 1px no-repeat;
}

.inline-block-input {
  display: inline-block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  background: transparent;
  border:1px solid;
}

.inline-block-text {
  display: inline-block;
  width: 50px;
  text-align: center;
  height: 30px;
  border:1px solid green;
}

<div class="block">
  <input type="text" class="inline-block-input" value="text">
  <span class="inline-block-text">*bc</span>
  <input type="text" class="inline-block-input" value="text">
</div>

Why are s also center vertically when making center vertically? （'s line-height not equals to its parent height）

1 Answers1