如何实现搜索表单中span文本与input输入框的垂直居中对齐

问题根源 #

你现在遇到的对齐偏差，本质是Bootstrap栅格的默认规则：同个.row容器下的所有列（放“SEARCH DEFINITION”文本的col-md-4、放搜索框的col-md-8），默认都是靠顶部对齐的。
之前手动加padding-top: 15px属于靠经验硬凑的偏移值，一旦搜索框的内边距、边框厚度有调整，对齐效果就会直接错位；而给span加display: inline-block没产生预期效果，是因为对齐逻辑受父级栅格容器控制，调整span自身的显示模式根本影响不了父容器的对齐规则，自然起不到作用。

规范调整方法 #

不需要手动计算边距偏移，通过标准CSS对齐属性就能实现长期稳定的居中效果：

• 给包裹两个列的.row容器加上垂直对齐属性，让行内所有子列自动在垂直方向居中
• 清理冗余样式：删掉之前硬加的padding-top偏移，移除没必要全局给span设置的display: inline-block规则
• 给搜索栏内部加对齐规则，保证搜索图标和输入框自身也能垂直居中，避免内部元素歪斜

调整后的代码 #

样式部分 #

.background {
  background-color: gray;
  width: 100%;
  height: 200px;
}
/* 栅格行垂直居中规则 */
.form-container-row {
  align-items: center;
}
span {
  color: white;
  font-weight: 600; /* 对应原设计的粗白字效果 */
}
/* 搜索栏内部布局 */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
input {
  width: 400px;
  border-radius: 4px;
  border: 3px solid white;
  font-size: 16px;
  background-color: #fefefe;
  padding: 12px 10px;
  transition: width 0.4s ease-in-out;
}

结构部分 #

<div class="background">
  <div class="row form-container-row">
    <div class="col-md-4"> 
      <span>SEARCH DEFINITION</span>
    </div>
    <div class="col-md-8">
      <div class="search-bar">
        <i class="fas fa-search"></i>
        <input type="text" name="search" placeholder="Search Keyword">
      </div>
    </div>
  </div>
</div>

效果说明 #

调整完成后，“SEARCH DEFINITION”文本会和搜索框自动保持垂直居中对齐，后续不管调整搜索框的内边距、边框厚度、高度，对齐效果都不会失效，完全不需要手动计算边距值。 #

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