技术问询：如何在navbar div容器内实现图片对齐？

看了你给出的Bootstrap 3 navbar结构，我来分享几种实用的图片对齐方案，不管是垂直居中还是水平位置调整都能轻松搞定：

一、垂直对齐（最常用：让图片和导航元素居中对齐） #

默认情况下，navbar里的图片很容易和文字、按钮出现上下错位，这时候用简单的CSS调整就能解决：

1. Navbar Brand区域的Logo对齐 #

如果你的图片是放在.navbar-header里的品牌Logo，先把图片嵌套在.navbar-brand标签中：

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse.collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">
    <img src="your-logo.png" alt="网站Logo">
  </a>
</div>

然后添加这段CSS，让图片和navbar垂直居中，同时避免撑大导航栏：

.navbar-brand img {
  max-height: 40px; /* 比navbar默认高度50px小，留上下留白更美观 */
  width: auto; /* 保持图片比例，防止拉伸变形 */
  vertical-align: middle; /* 关键属性：让图片和按钮/文字对齐 */
}

2. 导航项里的图标对齐 #

如果是在折叠导航区的链接里加小图标（比如用户头像、功能图标），可以这么写：

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li><a href="#"><img src="home-icon.png" alt="首页"> 首页</a></li>
  </ul>
</div>

对应的CSS调整：

.navbar-nav li a img {
  max-height: 20px;
  vertical-align: middle;
  margin-right: 6px; /* 和文字之间留一点间距，视觉更舒适 */
}

二、水平对齐（调整图片在navbar的左/中/右位置） #

1. 图片放在导航栏右侧 #

直接用Bootstrap自带的.navbar-right类，把图片放在这个容器里即可：

<div class="navbar-collapse collapse">
  <div class="navbar-right" style="margin-top:5px;">
    <img src="user-avatar.png" alt="用户头像" style="max-height:40px;">
  </div>
</div>

这里的margin-top:5px是为了让图片在50px高的navbar里垂直居中，你可以根据自己的navbar高度灵活调整。

2. 图片放在导航栏中间 #

Bootstrap 3默认没有居中navbar元素的内置类，我们可以自定义CSS实现：

/* 让navbar-header占满宽度，内部元素自动居中 */
.navbar-header {
  text-align: center;
  width: 100%;
}
/* 取消brand的浮动，改成inline-block实现居中 */
.navbar-brand {
  float: none;
  display: inline-block;
}
/* 调整汉堡按钮的位置，避免被挤到下方 */
.navbar-toggle {
  position: absolute;
  left: 15px;
  top: 0;
}

这样嵌套在.navbar-brand里的图片就会居中显示了。

几个实用小提醒 #

• 永远用max-height+width:auto设置图片尺寸，避免图片拉伸变形
• 如果用了navbar-fixed-top，记得给body加padding-top:70px，防止页面内容被导航栏挡住
• 移动端折叠状态下，上面的垂直对齐样式依然有效，不用额外调整

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