CSS 이미지 가운데 정렬 하는 2가지 방법

이미지뿐만 아니라 모든 태그는 기본적으로 왼쪽 정렬이 되어있습니다. 가운데 정렬을 하기 위해서는 웹 표준인 text-align:center을 쓰는 것이 일반적이지만 상황에 따라 다르게 표현해야 할 때도 있습니다. 그 방법에 대해 알아보겠습니다.

 

이미지 가운데 정렬하는 방법

부모 요소가 있는 경우

Example

text-align:

div {
  display : block ;

  text-align : center ;
}

img {
  display : inline;
}
직접 해보기

 

text-align은 left, center, right, justify 속성 값을 가지고 있습니다. block 요소 안에 inline 요소가 있어야 가운데 정렬을 할 수 있습니다. 즉, text 뿐만 아니라 이미지도 가능하다는 뜻입니다.

 

부모 요소가 없는 경우

 

Example

display:

img {
  display : block ;

  margin : 0 auto ;
}
직접 해보기

 

img 태그는 기본적으로 inline-block 속성입니다. 이 속성은 너비와 높이를 지정할 수 있고 줄 바꿈이 이루어지지 않습니다. 만약, 너비와 높이를 지정하지 않는다면 img 만큼만 영역이 잡힙니다. 

이때 block 요소를 사용한다면 한 영역을 차지하는 박스형태의 성질을 가지고 있기 때문에 가운데 정렬이 가능해집니다. 왜냐하면 width값이 100%가 되기 때문입니다.

추천글

css 박스 모델 구조 이해하기

HTML의 블록요소와 인라인 요소 특징

HTML 이미지 불러오는 방법, img 태그 속성을 이용하자!

이 글을 공유하기

댓글

Designed by JB FACTORY