在 div 中将 Icon 和 span 垂直居中 [重复]

Question

结构是这样的：

css
.toolBarHolder {
  height: 42px;
  line-height: 42px;
}

<div class='toolBarHolder'>
  <icon class='toolBarIcon'>near_me</icon>
  <span class='toolBarText'>lake area</span>
</div>

这样span 可以垂直居中，但icon 失败。

Answer 1

只需将属性display:flex; align-items:center; justify-content:center; 赋予.toolBarHolder。不需要使用 line-height;

应该是这样的：

css
.toolBarHolder {
  height: 42px;
  display:flex;
  align-items:center;
  justify-content:center;
}

P.D.：由于我们使用的是justify-content: center，因此您还必须设置宽度（div 内容也水平居中）。