머리글 텍스트를 이미지 옆에 세로로 정렬하십시오.

Question

이미지 옆에 수직으로 머리글 텍스트를 정렬하려고합니다. 나는 창 너비 및 텍스트 랩 (높이 이미지 높이보다 높다)는 이미지

.half { 
 
    width: 50%; 
 
} 
 
h4 { 
 
    font-size: 40px; 
 
}

<div class="half"> 
 
    <div class="advantages_header"> 
 
    <img class="advantages_icon" src="http://placehold.it/90x90" /> 
 
    <h4>HEADER TEXT MAYBE LONG</h4> 
 
    </div> 
 
</div>

Answer 1

오의 상단에 정렬하기 시작 감소 할 때 내 문제입니다! 난 그냥 덕분에 읽기, 나는 누군가가 :)

.half { 
 
    width: 50%; 
 
} 
 
.advantages_header { 
 
    position: relative; 
 
    height: 90px; 
 
} 
 
h4 { 
 
    left: 110px; 
 
    margin-right: 110px; 
 
    font-size: 40px; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translate(0, -50%); 
 
} 
 
img { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translate(0, -50%); 
 
}

<div class="half"> 
 
    <div class="advantages_header"> 
 
    <img class="advantages_icon" src="http://placehold.it/90x90" /> 
 
    <h4>HEADER TEXT MAYBE LONG</h4> 
 
    </div> 
 
</div>