为什么将垂直对齐方式应用于外部文本？

Question

为什么vertical-align: middle适用于外部文本，而不适用于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>

Answer 1

---

您必须使用align-items:center来使.code类的内容居中，因为您正在使用display:inline-flex

如果您想使用verticle-align:middle，则必须将display:table-cell分配给.code类

.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>