如何设置ul元素内联并垂直对齐？Bootstrap导航栏图标对齐异常求助

嘿，这问题我碰过好多次了！Bootstrap的navbar默认样式里，导航链接（<a>）和纯图标元素（<span>）的垂直对齐规则不一样，才会导致图标飘在顶部。给你几个靠谱的解决办法，挑适合你的来：

方法1：用Bootstrap内置类快速搞定 #

直接给包含图标的<li>加上navbar-text类，这个类是Bootstrap专门用来让非链接文本和导航栏元素对齐的，会自动匹配链接的padding和行高：

<div class="collapse navbar-collapse" id="responsive-menu">
  <ul class="nav navbar-nav navbar-right" >
    <li><a class="nav_links" href="#main">Главная</a></li>
    <!-- 给li添加navbar-text类 -->
    <li id="navi_images" class="navbar-text"><span class="glyphicon glyphicon-heart-empty"></span></li>
    <li><a class="nav_links" href="#">其他链接</a></li>
  </ul>
</div>

方法2：自定义CSS精准调整 #

如果你不想用内置类，也可以写几行CSS来强制图标对齐。核心是让图标和导航链接的行高、垂直对齐方式保持一致：

/* 针对你的图标元素 */
#navi_images .glyphicon {
  vertical-align: middle;
  /* 行高可以根据你导航栏的实际高度调整，默认navbar的行高大概在2.5左右 */
  line-height: 2.5;
}

/* 或者更通用的写法，适配所有navbar里的glyphicon */
.navbar-nav .glyphicon {
  vertical-align: middle;
  /* 微调margin来完美对齐，数值根据你的样式调整 */
  margin-top: -2px;
}

方法3：把图标放进链接标签里 #

如果这个图标不需要单独的点击区域，直接把它塞进<a>标签里，这样它会自动继承链接的所有样式，自然就对齐了：

<div class="collapse navbar-collapse" id="responsive-menu">
  <ul class="nav navbar-nav navbar-right" >
    <li><a class="nav_links" href="#main">Главная</a></li>
    <!-- 把图标放在a标签内 -->
    <li><a class="nav_links" href="#"><span class="glyphicon glyphicon-heart-empty"></span></a></li>
    <li><a class="nav_links" href="#">其他链接</a></li>
  </ul>
</div>

试一下这几个方法，应该就能让图标和链接乖乖待在同一水平线上啦！

内容的提问来源于stack exchange，提问作者O.Kuz