중간에 svg를 인라인 텍스트로 맞추기

Question

간단한 인라인 텍스트가있는 간단한 svg 이미지가 붙어 있습니다 (here). 텍스트와 아이콘을 세로로 가운데 정렬하는 방법? 나는 보통 martin-top을 설정하고, table-cell을 사용하지만 행운은 없다는 것과 같은 중간 정렬 방법을 시도했다.

HTML :

<div class="ImageLabel__label___Yb88q"> 
    <i class="ImageLabel__icon___bFeGT"> 
     <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> 
      <title>email</title> 
      <path d="..."></path> 
     </svg> 
    </i> 
    john@gmail.com 
</div> 

CSS : 그것은 float 값이 필요하기 때문에

svg { 
    width: 25px; 
    height: 25px; 
    margin-right: 3px; 
} 

Answer 1

svg { 
    width: 25px; 
    height: 25px; 
    margin-right: 3px; 
    Vertical-align: middle; /*----- Add this property in your svg -----*/ 
    } 

Answer 2

당신은 margin-top을 추가 할 수 없습니다. 다음과 같이 할 수 있습니다.

svg { 
    width: 25px; 
    height: 25px; 
    margin-right: 3px; 
    float: left; 
    margin-top: -3px; 
}