css - 对齐 mat-icon 和 img

Question

我想将垫子图标的底部与其旁边的 img 的底部对齐。我尝试了很多东西，这就是它目前的样子:

这是我的 HTML:

<div class="container">
      <p class="triage"><mat-icon>assignment_ind</mat-icon></p>
      <p class="O2"><img src="../../assets/med_O2.png"></p>
  </div>

CSS:

.O2, .triage{
display: inline-block;
vertical-align: middle;
}

.container img {
width: 50px;
height: 50px;
}

.container mat-icon{
font-size: 60px;
width: 60px;
}

Answer 1

使用行高:

.container
{
line-height: 60px; //or what ever height your container is
}