[css] CSS - (블럭요소 + 인라인요소) 중앙정렬 (= 가운데정렬)

1.

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

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

2.

해당 요소가 블럭요소인지, 인라인요소인지 확인

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

3. 요소 성질 바꾸기

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

4.

[블럭 요소 중앙 정렬] - 해당 요소에 아래 코드 적용.

 

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

 

---

[인라인 요소 중앙 정렬] - 부모 요소에 아래 코드 적용.

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

 

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

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

 

4-1.

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

 

<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>

 

결과보기

4-2.

인라인 요소 중앙 정렬 (예) <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>

 

결과보기