[CSS 기초]이미지 수평 정렬

CSS

HTML 이미지 수평 정렬 속성

HTML 문서를 작성하다 보면 이미지 바로 옆에 글을 입력하는 경우가 있는데요

이럴 때 이미지와 글의 위치가 부자연스러울 수 있어요

그 이유는 바로 이미지 수평 정렬이 잘 되지 않았기 때문이에요

이미지 수평 정렬을 위해서 존재하는 스타일이 있는데 바로 vertical-align 입니다!

예제 (적용 전)

위의 경우처럼 이미지를 사용하지는 않겠지만 예를 들어서 작대기 모양의 이미지를 텍스트 앞에 두고 싶은 경우를 볼게요

vertical-align 스타일 적용 전이기 때문에 아직 작대기이미지가 텍스트의 상단부분에 위치해 있어요

body img {


}

적용을 해보면 일단 저는 css파일에서 따로 적용해주었어요

사실 이렇게 간단한건 style태그에서 구현해도 되지만, 저는 과제하다가 포스팅하는거라 css파일로 따로 분리해서 적용해볼게요

body img {
  vertical-align: middle;

}

자 이렇게 vertical-align에 다양한 옵션이 있는데 그 중에서middle로 지정해주면 다음과 같이 텍스트와 이미지가 수평 정렬이 됩니다!

예제 (적용 후)

스타일 적용 결과 작대기 이미지가 텍스트의 중앙부분에 위치해요!

이상으로 HTML에서 이미지 수평 정렬 방법을 정리해보았습니다~