bootstrap 按钮中的图标未对齐

Question

我在导航栏上的搜索按钮有一个 bootstrap 图标和文本未垂直对齐

Fiddle link: Fiddle

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">
                        <div class="nav-search">
                    <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
                </input>
                </button>
            </form>

css 我尝试过的搜索：

.nav-search {
   display: inline-block;
}

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

Answer 1

更改您的 viewBox 属性值以定义用户中的位置和尺寸 space。这是相同的文档：viewBox

Answer 2

您可以将 display:flex 与 align-items 结合使用，使图标与文本垂直对齐。

.nav-search {
   display: flex;
  align-items: center;

}

  <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">
      <div class="nav-search">
        <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>

bootstrap 按钮中的图标未对齐

bootstrap icon not aligning in button

html

css

alignment

vertical-alignment

bootstrap-icons