为什么 s 也是垂直居中<input>，而使<span>居中垂直？(<input>的行高不等于其父高度)

Question

注意：<div>的高度是50px，<span>的行高也是50px

当不将"行高"应用于<跨度>时，所有元素都与父元素的顶部对齐，当将"行高：50px"应用于<跨度>时，为什么所有元素都垂直居中？

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

Answer 1

要了解正在发生的事情，请在输入中添加一些文本：

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

请注意，由于默认垂直对齐方式是基线，因此所有文本的对齐方式都相同。你的元素似乎居中，但它们不是。它们按照基线对齐对齐，作为副作用，您可以居中。

更改元素的对齐方式，您将有不同的行为：

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

如果跨度上没有线高，您仍将具有基线对齐：

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

获取更多详细信息的相关问题：

垂直对齐对齐除自身以外的其他所有内容

内联元素和行高

为什么在基线设置为垂直对齐时"创建"下降器？