[CSS] 자식 요소 가운데 정렬 및 수직 정렬

 

 

[ margin: 0 auto ] : 가운데 정렬 

header .inner {

  max-width: 980px;

  height: 78px;

  margin: 0 auto;

}

-   max-width: 980px; 최대 가로 너비, 상황에 따라 줄어 들 수 있다.

 

-  margin: 0 auto; 가운데 정렬 대표적인 속성 (상하 0 / 좌우 auto)

--ex. 왼쪽 값 5 오른쪽 값 5 ==>  왼쪽 auto 오른쪽 auto

⭐ 주의사항 ⭐

특정한 요소에 가로 사이즈가 정의되어져 있어야 'margin : 0 auto' 설정 값을 사용 할 수 있다.  

➡ max-width /기본적인 가로 사이즈(width)가 정해져 있어야 `margin: 0 auto`를 통해 가운데 정렬 가능

 

header .inner
특정한 가로 너비를 가지고
header 안에 있는 모든 콘텐츠들을 화면에 중앙 정렬을 해주는 용도

---

[ 후손 선택자 ]

🔥 problem🔥
section 안에서 타고 타고 내려가는 자손들 모두를 다 정의하면 관리하기도 작성하기도 어렵고 불편하다.

- 선택자를 타고 타고 작성

// header 안에 inner 안에 menu-group 

header .inner .menu-group{

  display: flex;

  align-items: center;

  height: 100%;

}

 

-  후손 선택자 ⭐

 

// header 부분의 inner를 건너 뛰어서 메뉴 그룹으로

header .menu-group{

  display: flex;

  align-items: center;

  height: 100%;

}

[ 수평 구조 ] : display : flex;

🔥 problem 🔥
menu-group안에 2개의 자식 요소 .logo / .main-menu
로고랑 메인 메뉴 전체가 수평 정렬이 되어야 한다.

 

1단계, logo & main-menu 수평 정렬

//menu-group안에 자식 요소들 수평 정렬

header .menu-group{

  display: flex;

}

✅ 로고 부분과 메뉴 전체가 수평 구조를 가지게 되었음 ✅

 

2단계, <li> 수평 정렬

메인 메뉴 안에 있는 각각의 항목들도 수평 정렬이 되어야 한다. 

 

// menu-group 안에 자식요소들 수평정렬

header .main-menu {

  display: flex;

}

 

[ 수직 가운데 정렬 ] : align-items: center;

🔥 problem 🔥
menu-group안에 항목들을 수직 가운데 정렬 해줘야 한다.
1️⃣ display: flex;가 설정 되어있다면 사용할 수 있는 수직 정렬 (align-items: center;)

header .menu-group {

  display: flex;

  background-color: olivedrab;

}

기본 상태

🔥 problem 🔥
자식 요소들을 menu-group의 높이에 영향을 받으며 수직 가운데 정렬된다.
2️⃣ 수직 가운데 정렬 시켰지만 menu-group 자체의 높이가 너무 작아서 변화가 없다.

header .menu-group {

  display: flex;

  background-color: olivedrab;

  align-items: center;

}

align-items:&nbsp;center;

menu-group의 height 100%는 메뉴 그룹의 부모 요소인 inner의 영향을 받는다.
= inner의 height 78px의 100% 만큼을 사용한다

header .menu-group {

  display: flex;

  background-color: olivedrab;

  align-items: center;

  height: 100%;

}