html css 텍스트 가운데 정렬 기초

div 안에 text를 가로 세로로 정렬하는 방법을 적어봅니다

자꾸 까먹고 찾아보는 건 이해를 잘 안하고ㅠ 넘어가기 때문인 것 같습니다. 

 

 

 

1. text-align: center;

text-align 은 가로 정렬을 설정 할 수 있는 속성이다

가운데 정렬을 하기 위해 center 중앙 센터로 설정 했습니다.

 

https://studiomeal.com/archives/197 첨고 했습니다

2.justify-content  메인축 방향  정렬 

display : flex 를 주고 

justify-content: center 속성으로 설정합니다. 

메인축 방향으로 정렬 <-----> (오뎅꼬치 방향으로 정렬)

그 축에서 만 움직인다 !! 

 

3. align 수직축 ( 오뎅을 뜯어내는 방향으로 정렬)

이건 위로 아래로 움직일 수 있다

 

 

 

4. 세로 로 가운데 정렬

padding 사용  padding 100px 0; 

 

align - items  사용하여 

display : flex; => align-items : center 지정하여 세로 가운데 정렬

 

 

 

 

 

 

 

css 게임으로 개념 정리 추천 

https://flexboxfroggy.com/#ko 

Flexbox Froggy