display : flex
flex 가 적용되었을 때, 가운데 정렬
justify-content: center;
align-items: center;justify-content 속성은 주축을 기준으로 정렬해준다
즉, 주축이 가로축(row)일 경우 이 코드는 가로선의 가운데 정렬을 의미한다!
그렇다면,
aling-items 속성은 당연히 주축의 수직축 기준이다.
기준이 되는 주축이 어느 방향인지 고려해서 속성을 적용하면 된다.
활용 예제 - 홈페이지 타이틀
▶ 적용 전
▶ 적용 후
위의 예제는 웹페이지 상단 타이틀을 만드는 과정이어서
요소들을 일정 간격을 두어 정렬하고자 하였고
display: flex;
justify-content: space-around;
align-items: center;이렇게 코드를 작성했다.
block, inline-block 요소
가로 기준 가운데 정렬은 쉽다.
text-align: center;그런데 세로 기준 가운데 정렬은 주의해야할 점이 있다..
vertical-align: middle;상기 속성을 주면 되긴 하지만, 이는 옆 요소를 따라간다고 한다. 옆 요소가 없거나 뭐.. 모호하다면 적용이 어렵다. 잘 안 되는 경우가 많다.
그럴 때는 아래 코드를 사용한다.
line-height: 150px;
height: 150px;블록의 높이만큼 height,line-height 값을 주면 된다.
자주 쓰일 것 같아 작성해두고 여러 번 꺼내볼 것 같다!
FE Engineer