[CSS] 이미지와 텍스트 정렬 | 수평 정렬

<img>

<img>는 대체 요소입니다. 기본적으로 display는 inline이나, 기본 크기는 내장한 이미지의 고유 크기로 정해지므로 마치 inline-block처럼 보입니다. border/border-radius, padding/margin, width, height 등의 속성을 이미지에 지정할 수 있습니다.

Text

CSS에서, 인라인 레이아웃에 참여하는 콘텐츠를 인라인 수준 콘텐츠라고 합니다. 대부분의 텍스트 시퀀스, 교체된 요소 및 생성된 콘텐츠는 기본적으로 인라인 수준입니다.
출처:https://developer.mozilla.org/ko/docs/Glossary/Inline-level_content

❇️<img> 와 보통 텍스트 요소로 쓰는 <span> 태그는 inline 요소이다

수평 정렬하기

vertical-align

vertical-align: middle

Flexbox

<div style="flex; align-items:center;">
 <svg>
 이미지 
 </svg>
<span>
  텍스트텍스트텍스트
</span>  
</div>

이미지, 텍스트 컨테이너를 포함하는 부모 요소에 flex와
align-items: center 속성을 부여하기