[CSS] img 가운데 정렬하기

 

1. text-align

2. vertical-align

 

3. margin left/right: auto

 

 

 

 

text-align

 

img는 inline속성으로 텍스트처럼 다뤄져 text-align으로 조절 가능하다.

<img>의 부모 태그 <div>에 text-align:center 속성을 적용하면 이미지 가운데 정렬이 된다.

 

 

 

 

vertical-align

 

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

또 img 태그는 다른 inline 태그와 다른 점이 크기 조절이 가능하다는 것이다. (inline-block과 비슷하다.)

vertical-align: top/middle/bottom

 

img{

      vertical-align:middle;

      height:200px;

}

 

 

 

 

margin left/right:auto

 

img의 css에 margin-left와 margin-right에 auto 를 넣으면 가운데 자동 정렬 된다.