목차
- 중앙정렬 위한 기본지식
- 요소 성질별 중앙정렬 원리 ★
- 블럭요소 중앙정렬 (예) <p> 요소
- 인라인요소 중앙정렬 (예) <span> 요소
- 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; 줬던 거 모두 제거.
