Why vertical alignment is applied to outer text?

Question

Whey the vertical-align: middle is applied to outer text and not to the text inside div.code

.code {
display: inline-flex;
border: 3px solid black;
height: 2.2rem;
text-align: center;
vertical-align: middle;
}

<div>
  code
  <div class="code">380805</div>
</div>

read here:https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align — לבני מלכה, Sep 04 '18 at 11:41

score 1 · Accepted Answer · edited Sep 04 '18 at 11:50

You have to use align-items:center to center the content of .code class because you are using display:inline-flex

if you want to use verticle-align:middle , then you have to give display:table-cell to .code class

.code1 {
display: table-cell;
border: 3px solid black;
height: 2.2rem;
text-align: center;
vertical-align: middle;
}

.code {
display: inline-flex;
border: 3px solid black;
height: 2.2rem;
text-align: center;
align-items: center;
}

<div>
  code
  <div class="code">380805</div>
   <div class="code1">380805</div>
</div>

Why vertical alignment is applied to outer text?

1 Answers1