세로 맞춤 CSS 속성

Question

이것은 아주 간단한 문제처럼 보일지 모르지만 지금까지 저를 뒤흔들 었습니다. 세로 맞춤 속성이 올바르게 작동합니다. 그러나
태그를 이미지의 가운데를 따라 실행하려는 텍스트 뒤에 추가하면
태그 뒤의 모든 텍스트가 이미지 바로 아래에 표시됩니다.

예 :

<img src="test.png" width="50" height="50" alt="test" style="vertical-align:middle;"/>  This text is fine. <br />This text is not. 

Answer 1

이 시도 : 여기

<img src="test.png" width="50" height="50" alt="test" style="vertical-align:middle;"/>   

<div style='display:inline-block; vertical-align:top;'> 
    <span style='display:inline-block;vertical-align:middle;'>This text is fine. <br />This text is not. 
</div> 

Answer 2

귀하의 예는 정의에 의해 줄 바꿈을 의미 태그 <br />가 포함되어 있습니다.

Answer 3

가장 좋은 방법은 센터를 CSS에서 거의 모든 정렬 할 수 있습니다.

.centrado-vertical{ 
    position: relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
}