Centering trick(dreamcoding)

div가 아니라 btn같은 것들, inline-block같은 것들은 text-align을 이용하면 중간으로 정렬이 된다.

그래서 텍스트 온라인 같은 경우에는 센터를 이용하면 요소들을 중간으로 정렬할 수 있지만 블럭 레벨은

적용이 되지 않는다.

 

블럭 레벨은 margin-auto;를 주어서 센터로 만들어야한다.

그래서 마진 오토와 텍스트 얼라인은 수평으로 중간 정렬 가능하지만 수직으로는 가운데 정렬이 안된다.

트랜스폼을 이용하면 되는데 트랜스폼은 움직이는 거 로테이션 하는 것들 가능하다

 

text-align : center; 수평으로 중간

line-height : 100px; 수직으로 중간

해키한 방법이다.

 

transform: translate

&

line-height 학습하기

 

text-align에 대한 추가 설명:

text-align은 블럭요소 안에서 그안의 컨텐츠들을(텍스트 뿐만 아니라 버튼과 같은 인라인요소) 

정렬할때 쓸 수 있다.