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

css 가운데 정렬

 

css만으로 요소를 가운데 정렬하는

방법을 소개하겠습니다.

 

반응형 웹이 아닌 일반 pc 또는 mobile용 웹을 만들 때는 javascript, jQuery를 사용할 없이
css만으로 가운데 정렬을 할 수가 있어 간단합니다.

css로 가운데 정렬하는 2가지 방법을 소개하겠습니다.

 

1. 부모 요소로 감싸주었을 경우

• img를 삽입할 경우, 보통 div인 부모 요소로 감싸줄 때가 많습니다.
• 이 경우, 부모 요소인 div 또는 p 태그에 text-align: center를 해줍니다.

 

css

div{text-align: center;}

 

text-align

• text-align 속성이란 문단의 텍스트 정렬 방법을 지정합니다.
• 종류: text-align: start / end / left / right / center / justify / match-parent
• 여기서 우리가 가장 많이 사용하는 것은 기본형인 left 와 center입니다.

속성 값	종류
start	현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬합니다.
end	현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬합니다.
left	왼쪽에 맞추어 문단을 정렬합니다.
right	왼쪽에 맞추어 문단을 정렬합니다.
center	가운데에 맞추어 문단을 정렬합니다.
justify	양쪽에 맞추어 문단을 정렬합니다.
match-parent	부모 요소를 따라 문자를 정렬합니다.

 

화면 보기(Result 클릭)

 

2. 부모가 없을 경우

혹시, 부모로 감싼 태그가 없을 경우,
img 태그에 display: block; margin: 0 auto; 를 넣어줍니다.

img는 inline 요소 이므로, 여백을 지정할 경우(margin 또는 padding 사용 시)
반드시 display: block요소로 바꾼 후, 사용해야 합니다.

img {
  display: block;
  margin: 0 auto;
}

 

화면 보기(Result 클릭)

 

3.  

---

block, inline 요소에 대한 설명은 아래의 포스트로 이동해주세요. 

https://goddino.tistory.com/168

[css] block, inline의 뜻과 사용법(ft. display, inline-block)

---

반응형 웹의 경우 이미지를 수평, 수직 가운데 정렬할 경우는 아래 링크를 확인하세요.

https://goddino.tistory.com/9

[js/jQuery] 반응형웹 이미지 가운데 정렬