[코딩 공부_33] css, 가로·세로 중앙정렬하기

오늘은 css로 세로, 가로 중앙 정렬하는 방법을 알아보겠다!

세로, 가로 중앙정렬하는 개념은 정말 어려운 거 같다 😑

이론으로만 이해하려하지말고 꼭 실습해보면서 익히는 걸 추천한다!!

<가로 중앙 정렬>

- 가로 중앙 정렬은 text-align을 center로 하면 쉽게 중앙 정렬이 가능하다. 하지만 text에만 적용되기 때문에 text가 아닌 경우엔 display를 inline으로 설정하고 사용해야한다

- margin을 auto로 주게 되면 중앙 정렬이 되지만block 요소만 적용이 가능하기 때문에 주의 해야한다!

<세로 중앙 정렬>

- inline 요소를 수직 정렬 하기 위해선 Vertical-align을 꼭 알아야 한다

① vertical-align

- inline, inline-block에서 사용(div에서 사용하면 작동되지않음)

- 주로 두 요소 이상일 때 사용

- table-cell에서 수직 정렬시 사용

- top: 인라인 box 윗부분을 행박스의 위에 정렬한다

<div><p>세로정렬</p></div>

- 박스를 설정하기 위해 div로 p태그를 감싸준다

div {display: table;}
p {dispaly: table-cell;}

- p태그는 display: table-cell로 div는 table로 바꿔서 테이블 구조로 만들어준다

div {height: 200px;}
p {vertical-align: middle;}

div에는 높이 값을 주고 p태그엔 세로 정렬 값을 넣어주면 정렬이 된다!

<세로 중앙 정렬>

	dispaly: table-cell vertical-align: middle	line-height
inline	가능	가능
inline-block	가능	가능(baseline 기준) *img, inline-block으로 변경한 block의 경우 vertical-align:middle; 추가하기
block	가능	X

<가로 중앙 정렬>

BEE_STUDY