[CSS] 글자,이미지 중앙 가운데 정렬하는 방법

html,css 이미지 중앙 정렬하는 방법들 총정리

 

글자와 이미지,사진 가운데 정렬하기를 중심으로 정렬하기에 대한 속성들을 정리해보았습니다.

 

 

1. 글자 가운데 정렬하기

 

text-align: center;

 

 

2. 사진 가운데 정렬하기

 

- margin 속성

display: block;   margin-left: auto;   margin-right: auto;

margin: 0;   margin-left: auto;   margin-right: auto;

 

- line-height / inline-block 속성

line-height: 200px;   height: 200px;   text-align: center;

line-height: 1.5;   display: inline-block;   vertical-align: middle;

 

 

- position / float 속성

float은 좌우정렬에 사용하기 좋은 속성이다.

특히 absolute는 특정 위치에 절대적으로 위치하기에 좋은 속성이지만, 자동 중앙정렬이 어려우므로 일일이 픽셀 값을 조정해줘야하는 어려움이 있다.

position: absolute;   right: 0px;

float: right;

 

 

- position 속성 대안(transform / margin)

position의 relative와 absolute를 활용하여 자동 중앙정렬을 할 수 있다.

transform / margin의 퍼센트(%)와 픽셀(px) 값을 조정해서.

.div{ position: relative; } .text .image{ margin: 0;   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%); }

.div{ position: relative; } .text .image{ margin: 0;   position: absolute;   top: 50%;   left: 50%; margin-top: -50px; margin-left: -50px; }

 

 

📚 position의 relative/absolute 원리

html은 기본적으로 모든 요소가 맨 위 좌측 지점부터 시작한다.(종이에 글쓰기하듯)

모든 사진,텍스트,div(상자요소)의 꼭지점(포인터)은 당연하게도 좌측 상단 모서리에 위치한다.(우측 그림 참고)

그래서 top,left로 사진,글자 위치를 반값인 50%로 지정해줘도 실제로 보이는 것은 정가운데 있지 않다.

왜냐하면 그림처럼 포인터가 정중앙에 있기때문에 상대적으로 그림은 우측 하단으로 쏠려 보인다.

더 쉽게 말해 위치는 포인터를 기준으로 하기때문에 이 포인터의 값을 마이너스(-) 값으로 조정하여 실제 그림,글자,상자요소가 정중앙에 있게끔 보이도록 한 번 더 값 조정이 필요하다.

그 마이너스 값을 작용해주는 속성이  transform과 margin인 셈이다.

 

 

 

- flex 속성

flex-direction으로 정렬을 두 번 지정해줄 수 있다.

내부 요소들을 세로/가로로 정렬해주고 정렬된 이 요소 전체를 중앙으로 정렬할 수 있다.

display: flex;   justify-content: center;   align-items: center;

display: flex; flex-direction: column;   justify-content: center;

 

 

좋아요와 구독하기는 글쓴이가 더 좋은 글을 작성하는데 힘이 됩니다. 감사합니다.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////