[css] CSS - (블럭요소 + 인라인요소:이미지/텍스트) 중앙정렬/가운데정렬 원리/방법

목차

1. 중앙정렬 위한 기본지식
2. 요소 성질별 중앙정렬 원리 ★
3. 블럭요소 중앙정렬 (예) <p> 요소
4. 인라인요소 중앙정렬 (예) <span> 요소
5. justify-content 속성값에 따른 이미지 중앙정렬 차이

중앙정렬 위한 기본지식 

※ 해당요소와 주변요소에 border:1px solid red; 추가. (∵ 작업 편리)

 

1.

중앙정렬 시키고자 하는 요소의 선택자 찾기

https://homzzang.com/b/css-251

 

2.

해당 요소가 (블럭요소/인라인요소)인지 확인 ★

https://homzzang.com/b/html-103

 

3. 요소 성질 바꾸기

https://homzzang.com/b/css-107

 

요소 성질별 중앙정렬 원리 ★

[블럭요소 중앙정렬]

 

해당요소 선택자 {width: OOpx; margin:OOpx auto;}

또는,
부모요소 선택자 {display:flex; justify-content:center} 

---

[인라인요소 중앙정렬]

※ 부모 요소는 너비를 갖는 블럭 요소 성질 가져야 함. 

 

부모요소 선택자 {text-align:center;}

또는,
부모요소 선택자 {display:flex; justify-content:center}

 

---

PS. 

justify-content 속성값을 아래처럼 변경 시 요소 간 간격 조절 가능.

• justify-content:space-between
• justify-content:space-around
• justify-content:space-evenly

  

블럭요소 중앙정렬 (예) <p> 요소

[방법1] - 해당 요소에 width:OOpx; margin:0 auto 적용

 

<style>

div {

  border:1px solid silver;

  padding:30px;

}

div > p {

  border:1px solid red;

  width:50%;

  margin:0 auto;

}
</style>

<div>

  <p>홈짱닷컴 Homzzang.com</p>

</div>

 

결과보기

---

[방법2] - 부모 요소에 display:flex; justify-content:center 속성적용

 

<style>

div {

  display:flex;

  justify-content:center;

  border:1px solid blue;

}

div > p {

  border:1px solid red;

}

</style>

<div>

  <p>홈짱닷컴 Homzzang.com</p>

  <p>홈페이지 제작관리 강의</p>

</div>

 

결과보기

 

인라인요소 중앙정렬 (예) <span> 요소

[방법1] - text-align:center;

 

<style>

div {

  border:1px solid silver;

  padding:30px;

  text-align:center;

}

div > span {

  border:1px solid red;

}

</style>

<div>

  <span>홈짱닷컴 Homzzang.com</span>

</div>

 

결과보기

---

[방법2] - display:flex;justify-content:center;

 

<style>

div {

  display:flex;

  justify-content:center; 

  border:1px solid blue;

}

span {

  border:1px solid red;

}

</style>

<div>

  <span>홈짱닷컴 Homzzang.com</span>

</div>

 

결과보기 

PS. flex (가로/세로) 중앙정렬 원리 자세히 보기 

justify-content 속성값에 따른 이미지 중앙정렬 차이

 

<style>

body {background:gray;}

.test-align {text-align: center; }

.center {display: flex; justify-content: center;}

.space-around {display: flex; justify-content: space-around;}

.space-between {display: flex; justify-content: space-between;}

.space-evenly {display: flex; justify-content: space-evenly;}

</style>

<div class="test-align">

    <img src="https://i.imgur.com/YrkG5xB.gif">

    <img src="https://i.imgur.com/YrkG5xB.gif">

    <img src="https://i.imgur.com/YrkG5xB.gif">

</div>

<div class="center">

    <img src="https://i.imgur.com/YrkG5xB.gif">

    <img src="https://i.imgur.com/YrkG5xB.gif">

    <img src="https://i.imgur.com/YrkG5xB.gif">

</div>

<div class="space-around">

    <img src="https://i.imgur.com/YrkG5xB.gif">

    <img src="https://i.imgur.com/YrkG5xB.gif">

    <img src="https://i.imgur.com/YrkG5xB.gif">

</div>

<div class="space-between">

    <img src="https://i.imgur.com/YrkG5xB.gif">

    <img src="https://i.imgur.com/YrkG5xB.gif">

    <img src="https://i.imgur.com/YrkG5xB.gif">

</div>

<div class="space-evenly">

    <img src="https://i.imgur.com/YrkG5xB.gif">

    <img src="https://i.imgur.com/YrkG5xB.gif">

    <img src="https://i.imgur.com/YrkG5xB.gif">

</div>

 

결과보기

PS. 테두리 확인 위해 border:1px solid red; 줬던 거 모두 제거.