在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内容也应水平居中）。