Bootstrap图标在导航栏搜索按钮内与文本垂直不对齐问题求助

问题根源 #

• 你的HTML存在语法错误：button内的.nav-search容器闭合标签误写为</input>，属于标签嵌套错误，需要先修正。
• 你当前给.nav-search设置的inline-block布局默认采用基线对齐规则，无法自动将SVG图标与文本垂直居中对齐。

方案1：使用Bootstrap内置工具类（无需额外自定义CSS） #

直接给.nav-search添加Bootstrap原生的flex布局类即可，修改后的HTML代码如下：

<form class="d-flex search-form">
  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-dark" type="submit">
    <!-- 新增d-flex align-items-center gap-1三个工具类，gap值可调整图标与文字间距 -->
    <div class="nav-search d-flex align-items-center gap-1">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search nav-svg" viewBox="0 0 16 16">
        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
      </svg>
      Search
    </div>
  </button>
</form>

原有自定义CSS可全部保留，无需额外调整。

方案2：修改自定义CSS实现 #

如果你不想用Bootstrap工具类，直接调整.nav-search的样式即可，修改后的CSS如下：

.nav-search {
   display: flex;
   align-items: center;
   gap: 4px; /* 控制图标与文字的间距，可按需调整 */
}

.search-form {
    text-align: center;
    width: 100%;
}

同时修正HTML中的标签闭合错误即可生效。

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