如何将导航栏中的图标与文本居中对齐且不挤压其他文本？

嘿，我之前也碰到过一模一样的情况！在Bootstrap的navbar-brand里混用Material Icons时，图标默认的排版属性很容易打乱文本对齐，甚至挤压导航栏里的其他元素。咱们来一步步搞定它：

问题根源 #

Material Icons默认是inline-block元素，自带的行高和基线位置和Bootstrap导航栏的文本不匹配，再加上图标本身的高度可能比文本高，导致整个navbar-brand容器被撑高，间接挤压了导航栏里的其他元素。

快速修复方案 #

给图标添加自定义CSS规则，强制对齐并调整尺寸：

.navbar-brand .material-icons {
  /* 让图标和文本中线对齐，避免文本被挤下去 */
  vertical-align: middle;
  /* 调整图标大小，和导航文本保持协调 */
  font-size: 1.2em;
  /* 给图标和文字之间加一点间距，视觉更舒服 */
  margin-right: 6px;
}

如果上面的方案还没完全解决，你可以试试调整navbar-brand的行高，确保容器高度和图标匹配：

.navbar-brand {
  /* 重置行高，避免容器被图标撑大 */
  line-height: 1.4;
}
.navbar-brand .material-icons {
  vertical-align: middle;
}

效果验证 #

修改后，你的Hungus Bungus文本会和polymer图标完美对齐，导航栏里的其他元素也不会再被莫名挤压啦！

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