在div中将Icon和span垂直居中

时间:2019-05-06 08:35:55

标签: html css

结构如下:

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失败。 enter image description here

1 个答案:

答案 0 :(得分:2)

只需将属性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内容也应水平居中)。