[HTML] 이미지 정렬

이미지(img) 가운데 정렬

• text-align
• margin auto
• vertical-align

text align

img는 텍스트처럼 다뤄지기 때문에 text-align으로 조절이 가능합니다. <img>태그의 부모태그인 <div>태그에 text-align:center를 적용하면 이미지를 가운데 정렬할 수 있습니다.

 

 

 

 

 

margin left/right: auto

 

img의 margin-left와 margin-right에 auto를 주면 자동 가운데 정렬이됩니다.

 

 

vertical-align 

이번엔 응용을 해서 텍스트를 이미지의 중앙에 정렬해보겠습니다. 이때는 vertical-align을 사용하면 됩니다.

먼저 vertical-align은 inline이나 inline-block만 사용 가능한데,<img>태그는 inline 속성이기때문에 vertical-aline을 사용할 수 있습니다.

&
<img>태그는 다른 inline태그와는 다르게 크기 조절이 가능합니다. 마치 inline-block처럼요 ~!
우리는 아래에서 이미지의 height를 150px로 맞추겠습니다.