如何在Bootstrap导航栏中居中显示图片/Logo？

我用Bootstrap 5制作了带有搜索栏和自定义Logo的导航栏，已经加长了搜索栏，但始终无法让Logo居中。尝试给图片添加justify-content-center类、使用align-content属性，甚至移除CSS中的float属性，图片都没有任何移动。

原代码： #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap-email-vallejo</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body> 

 <nav class="navbar bg-body-tertiary">
        <div class="container-fluid" style="background-color: black;">
          <a class="navbar-brand"> <img class="img-responsive center-block" src="paperplane-4 copy.png" alt=""  width="100" height="40"></a>
          <form class="w-100 p-3" role="search">
            <input class="form-control me-2" type="search" placeholder="Search Your Mail" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </nav> 

  <div class="container">
  <div class="row">
  <div class="col"
  style="border: 1px solid red;">
  Column 1
  </div>

    <div class="col"
    style="border: 1px solid green;">
    Column 2
    </div>
     <div class="col" style="border: 1px solid orange;">
     Column 3
     </div>
</div>
</div>
 
</body>
</html>

效果截图： #

修复方案 #

方案1：Logo单独一行居中，搜索栏置于下方

Bootstrap 5的导航栏容器默认是flex-row布局，要让Logo居中，只需修改container-fluid的flex布局类，让子元素垂直排列并整体居中：

<nav class="navbar bg-body-tertiary">
  <div class="container-fluid d-flex flex-column justify-content-center align-items-center" style="background-color: black;">
    <a class="navbar-brand">
      <img src="paperplane-4 copy.png" alt="" width="100" height="40">
    </a>
    <form class="w-100 p-3" role="search">
      <input class="form-control me-2" type="search" placeholder="Search Your Mail" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

方案2：Logo与搜索栏同行居中（搜索栏居右）

如果希望Logo和搜索栏在同一行，Logo居中、搜索栏靠右，可以用网格布局调整容器结构：

<nav class="navbar bg-body-tertiary">
  <div class="container-fluid d-grid grid-template-columns: 1fr auto 1fr align-items-center" style="background-color: black;">
    <div></div> <!-- 左侧占位列 -->
    <a class="navbar-brand">
      <img src="paperplane-4 copy.png" alt="" width="100" height="40">
    </a>
    <form class="p-3 justify-self-end" role="search">
      <input class="form-control me-2" type="search" placeholder="Search Your Mail" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

为什么之前的方法无效？ #

• justify-content-center、align-content是flex容器的属性，需要添加到Logo的父元素上，直接给图片添加这些类不会生效。
• Bootstrap的navbar-brand默认是左对齐的flex项，必须通过调整父容器的布局规则才能改变它的位置。
• img-responsive是Bootstrap 3的类，Bootstrap 5中已替换为img-fluid，不过你已经固定了图片宽高，这个类可以省略。

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