如何在Bootstrap导航栏的a标签内实现文本与图片垂直居中对齐

问题原因 #

你当前的排版问题来自两个点：

• 图片设置了align-text-top类，强制图片与文本顶部对齐，放大图片后文本自然会偏上
• 75px高度的图片超出了Bootstrap导航栏默认的上下内边距范围，撑高导航栏的同时会导致其他导航元素也出现对齐偏移

实现方案（无需缩小图片，用Bootstrap自带工具类即可实现） #

仅需要修改少量代码，不需要额外写自定义CSS：

1. 给navbar-brand标签添加弹性布局垂直居中相关的工具类，同时去掉图片上的align-text-top类
2. 可选：给导航栏<nav>标签添加上下内边距类，适配大尺寸logo的同时让所有导航元素整体居中

核心修改代码 #

<!-- 给nav加py-3调整上下内边距，适配75px高的logo -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark py-3">
  <div class="container-fluid">
    <!-- 给navbar-brand加d-flex、align-items-center、gap-2，实现子元素垂直居中，加图片和文本的间距 -->
    <a class="navbar-brand d-flex align-items-center gap-2" href="#">
      <!-- 去掉img的align-text-top类 -->
      <img src="PendingOnLogoV.2.png" alt="" width="75" height="75" class="d-inline-block">
      Message
    </a>
    <!-- 其余导航代码保持不变即可 -->
  </div>
</nav>

备选方案（不调整导航栏高度） #

如果对导航栏高度有固定要求，你可以将图片尺寸调整到30-40px范围内，保留原有的align-text-top类也能实现正常对齐。

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