Bootstrap导航栏品牌图片调整后文字错位，如何修正垂直对齐？

这个问题的核心是你手动给图片加了margin-top来调整位置，但这会破坏导航栏品牌元素内的垂直对齐关系。其实Bootstrap 4本身提供了灵活的布局工具，我们可以利用flex布局轻松实现图片和文字的垂直居中，完全不需要手动调整margin。

具体解决方案步骤： #

• 首先，移除你给<img>标签设置的margin-top:10px——这正是导致文字被向下推的直接原因。
• 然后，修改.navbar-brand的样式，把原来的line-height:80px替换成flex布局相关属性，让内部元素自动垂直居中：

.navbar-brand {
  padding: 0 15px;
  height: 80px; /* 保持你原本设定的导航栏高度 */
  display: flex;
  align-items: center; /* 关键属性：让内部所有子元素垂直居中 */
}

• 另外，你给<img>加的align-top类已经不需要了，配合flex布局后可以直接去掉，只保留d-inline-block或者也可以省略，flex布局会自动处理元素的排列。

修改后的完整代码： #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
.navbar {
  font-size: 0.8rem;
  font-weight:500;
}
.navbar-brand {
  padding: 0 15px;
  height: 80px;
  display: flex;
  align-items: center; /* 实现垂直居中的核心 */
}
.navbar-toggle {
  /* (80px - button height 34px) / 2 = 23px */
  margin-top: 23px;
  padding: 9px 10px !important;
}
</style>
<link href='#' rel='stylesheet'>
<nav id="bt_navbar" class="navbar navbar-expand-lg fixed-top" style="background: gray!important;">
  <div class="container">
    <a class="navbar-brand mx-auto" href="#" style="color:white;">
      <img src="logo.png" width="30" height="30" class="d-inline-block" alt="logo" style="margin-right:5px">
      Brand Name
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" style="background-color:black!important;">
      <span class="navbar-toggler-icon" style="background-color:white!important;"></span>
    </button>
    <div class="collapse navbar-collapse text-right" id="navbarTogglerDemo02">
      <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="#" style="color:white">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" style="color:white">Link 2</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

原理说明： #

Bootstrap 4本身基于flexbox布局，我们给.navbar-brand设置display:flex和align-items:center后，它内部的图片和文字会自动沿着垂直方向居中对齐，既不需要手动调整margin，也不会出现文字被推挤的问题。同时保持.navbar-brand的高度和导航栏一致，能让整个品牌区域和导航栏完美匹配。

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