Bootstrap 4.5元素对齐失效问题求助

数据老陈

2026-7-19

Bootstrap 4.5行内元素垂直居中失效问题及解决思路

问题描述

尝试使用Bootstrap 4.5的align-items-center类实现行内两个元素的垂直居中，但未成功。使用的代码如下：

<div class="row align-items-center">
  <div class="col-auto">
    <h6>Alignment Testing</h6>
  </div>
  <div class="col-auto ml-auto">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
      <input type="text" class="form-control" placeholder="Alignment Testing" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" >

问题示意图

切换align-items-start/end时，h6文本位置会轻微变化，但始终无法实现垂直居中。尝试为div设置高度后问题仍存在。

解决思路

清除h6的默认边距：Bootstrap的h6自带默认上下外边距（margin-top: 0.5rem; margin-bottom: 0.5rem;），这会导致它与输入框的垂直对齐出现偏差。给h6添加my-0类即可清除默认边距，让元素基线对齐：
```
<h6 class="my-0">Alignment Testing</h6>
```
确认行高自适应逻辑：row类的高度由子元素决定，align-items-center是让子元素在当前行高范围内居中。输入框所在的input-group因内边距、边框存在，高度会略高于默认样式的h6，清除h6边距后两者视觉上会更接近垂直居中。
强制行高兜底（可选）：若仍有视觉偏差，可为row设置固定高度或最小高度，配合align-items-center确保居中效果。比如自定义高度类：
```
<div class="row align-items-center" style="height: 45px;">
```
或使用Bootstrap内置高度类（如h-25），前提是该类高度符合需求。
排查样式冲突：用浏览器开发者工具检查元素盒模型，确认是否有自定义CSS覆盖了Bootstrap的row、col类样式（如额外的内边距、外边距或display属性修改），这类冲突会直接影响垂直对齐效果。