Navbar中Glyphicons与文本垂直居中对齐问题求助

我来帮你搞定这个对齐难题！你遇到的问题主要是因为块级元素的布局特性和vertical-align的生效范围限制导致的，咱们一步步来修复：

问题根源分析 #

1. 你用了<div class="navtab">包裹文字，而<div>是块级元素，默认会独占一行，导致图标和文字不在同一行，自然没法垂直居中；
2. vertical-align属性只对行内元素/行内块元素生效，直接加在图标上但文字是块级的话，起不到预期效果。

解决方案一：Flex布局（推荐，简洁高效） #

Flex布局能轻松实现元素的垂直居中，而且在Bootstrap 3的环境下兼容性也不错：

修改后的HTML（把div改成span，保持行内特性）

<li>
  <a class="dropdown-toggle" href="{% url 'Homepage' %}">
    <span class="glyphicon glyphicon-home"></span>
    <span class="navtab"> Accueil </span>
  </a>
</li>

对应的CSS

/* 给导航栏的a标签设置flex布局，强制内部元素垂直居中 */
.navbar-nav li a.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px; /* 可选：给图标和文字之间添加一点间距，视觉更舒服 */
}

span.glyphicon { 
  font-size: 1.7em; 
  /* 这里不需要额外加vertical-align了，flex已经搞定对齐 */
}

解决方案二：行内块元素对齐（兼容更老的浏览器） #

如果需要兼容不支持flex的老浏览器，可以用行内块的方式：

CSS代码

span.glyphicon { 
  font-size: 1.7em; 
  display: inline-block;
  vertical-align: middle;
}

.navtab {
  display: inline-block;
  vertical-align: middle;
  /* 可选：如果文字行高和图标不匹配，可以调整line-height */
  /* line-height: 1.7em; */
}

HTML调整（同样建议把div改成span，或者给.navtab加display: inline-block）

<li>
  <a class="dropdown-toggle" href="{% url 'Homepage' %}">
    <span class="glyphicon glyphicon-home"></span>
    <span class="navtab"> Accueil </span>
  </a>
</li>

这样调整后，图标和文字就能完美垂直居中啦！

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