图标旁文字垂直居中CSS样式不生效问题求助

我看了你的场景，图标旁边的「admin」文字没和图标垂直居中，问题出在你当前的CSS设置上，咱们来调整一下：

问题分析 #

你给.HeaderToolbar设置了align-items: baseline;，这个属性会让flex容器里的子元素以基线对齐，这就是文字和图标不对齐的核心原因；另外vertical-align: middle;在flex布局里是不起作用的，这个属性主要用于行内元素或表格单元格，flex布局的垂直对齐靠align-items来控制。

解决方案 #

把.HeaderToolbar的align-items值改成center，同时可以删掉没用的vertical-align: middle;，修改后的CSS代码如下：

.HeaderToolbar {
  background-color: black;
  color: white;
  fill: white;
  width: 100%;
  margin: 0 auto;
  align-items: center; /* 替换原来的baseline，实现垂直居中 */
  /* vertical-align: middle; 可以删除，flex布局下无需此属性 */
  /*white-space: nowrap;*/
}

原理说明 #

当.HeaderToolbar是flex容器时，align-items: center;会让所有子元素在垂直方向（交叉轴）上居中对齐，这样图标和旁边的「admin」文字就能完美对齐啦～

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