如何在CSS中让输入框旁的标签文字始终精准垂直居中？

问题场景 #

使用Cambria字体时，相邻的标签与输入框默认状态下输入框略低于标签文字，希望实现输入框精准对齐标签冒号的垂直中心。此前通过调整label的height/line-height实现了效果，但想要更简洁优雅的通用方案，无需手动调整像素。

解决方案 #

方案1：Flexbox布局（推荐，现代浏览器首选）

给包含标签和输入框的父容器.input设置Flex布局，利用align-items: center实现子元素自动垂直居中，适配所有字体和字号，完全无需手动调整像素。

修改后的完整CSS代码：

.input {
  display: flex;
  align-items: center;
  gap: 8px; /* 可选，自定义标签与输入框的间距 */
}

.btn {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: x-large;
    margin: 10px 0px;
}

.main-text {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: x-large;
}

.header {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: x-large;
    border-bottom: solid;
    background-color: beige;
    font-weight: bold;
    color: darkslategray
}

#feedback {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: x-large;
    border-top: solid;
    margin-top: 20px;
    padding: 10px;
}

#guess-input[type=number]::-webkit-inner-spin-button,
#guess-input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

原理：Flexbox的align-items: center会让容器内的子元素在垂直方向上自动居中，不受字体基线差异影响，是当前最通用、易维护的布局方案。

方案2：inline-block + vertical-align（兼容旧浏览器）

如果需要兼容不支持Flexbox的旧环境，可以给标签和输入框设置inline-block并指定vertical-align: middle：

修改后的关键CSS代码：

.main-text[for="guess-input"], #guess-input {
  display: inline-block;
  vertical-align: middle;
}

原理：将元素设置为inline-block后，vertical-align: middle会让元素相对于父元素的中线对齐，解决默认基线对齐导致的输入框偏移问题，同样无需手动调整像素。

为什么不推荐手动调整height/line-height？ #

手动设置固定像素值依赖当前的字体、字号，一旦字体变更或响应式布局中字号调整，就需要重新修改数值，维护成本高，而上述两种方案都是自适应的，通用性更强。

内容的提问来源于stack exchange，提问作者Arthur