[css] 반응형 유동적 너비에 따른 이미지 가운데 정렬 방법

반응형 가운데 정렬

 

반응형에 맞는

이미지 가운데 배치 방법입니다. 

 

처음 화면에는 이미지나 컨텐츠가 가운데 정렬로 잘 되다가,
브라우저 너비를 늘리거나 줄였을 경우, 이미지 또는 컨텐츠가 가운데 유지가 안되거나 잘릴 경우가 많습니다.

부모 요소 혹은 요소에 css로  text-align: center 또는  margin: 0 auto 값을 주어도
브라우저가 유동적으로 움직임에 따라 요소가 가운데 유지가 안되는 한계를 가지고 있을 경우, 사용하는 정가운데에 배치하는 방법입니다. 

 

가운데 배치 적용한 예

아래와 같이 브라우저 너비를 줄였을 경우에도 계속해서 이미지가 가운데 잘 배치되어있습니다.

처음 화면

 

브라우저 너비 줄였을 경우 화면 

 

예제 코드

 

css 요소 가운데 정렬 구현 방법

left: 50%으로 브라우저의 절반만큼 왼쪽에서부터 50% 지점에 컨테이너를 위치시키고,
margin-left: -컨테이너 너비의 절반값으로 컨테이너의 너비 절반을 다시 왼쪽으로 당겨옵니다.
이때  수식은 calc 를 이용한 계산식을 넣는 것을 추천합니다. -> margin-left: calc(해당요소 너비px / -2);

즉, 왼쪽으로부터 50%의 거리로 위치한 상태에서 요소 자체를 왼쪽으로 다시 요소 절반 너비만큼 당겨옵니다.

 

부모 요소 css

선택자 {position: relative;}

 

해당 요소 css

선택자 {
position: absolute;
top: 특정 높이px;
left: 50%;
margin-left: calc(해당요소 너비px / -2);
}

---

다른 방법으로 구현한 수직 수평 가운데 정렬은 아래의 포스트로 이동해주세요. 

css text-center, margin 속성을 이용한 가운데 정렬

https://goddino.tistory.com/11

[css] css 이미지, 컨텐츠 가운데 정렬 2가지 방법

 

css 포지션을 이용한 가운데 정렬

https://goddino.tistory.com/175

[css] position으로 가운데 배치, 정렬

 

css flex를 이용한 가운데 정렬

https://goddino.tistory.com/123

[css] 수직 수평 가운데 정렬(ft. flex, align-items: center, justify-content: center;)

 

자바스크립트, 제이쿼리를 이용한 가운데 정렬

https://goddino.tistory.com/9

[js/jQuery] 자바스크립트 이용한 반응형웹 이미지 가운데 정렬