合わせマット・アイコンと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 
} 

Answer 2

は、あなたとマット・アイコンをプッシュダウンできマージンやパディングの少し？

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

このような場合はどうなりますか？

<style> 
.container { 
    position: relative; 
    width: 65px; 
    height: 100px; 
} 

p.triage { 
    background: blue; 
    width: 30px; 
    height: 40px; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
} 

p.O2 { 
    width: 30px; 
    height: 20px; 
    background: red; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 
</style> 
<div class="container"> 
    <p class="triage"></p> 
    <p class="O2"></p> 
</div>