[CSS] alignment - 가운데 정렬 하기

요소들을 가운데 정렬하는 여러가지 방법들이 있다.

 

1. margin : auto

파란 상자에 margin : auto를 주었다.

수평적으로는 가운데정렬이 되었으나 수직은 적용이 안된다..!!

위 박스에 text-align : center를 주면 적용이 안된다. 

2. text-align : center

text-align은 텍스트가 아니더라도 다른 요소들을 정렬 할 수 있다.

그러나 div같은 경우는 적용이 안된다. 

block 요소에서만 text-align은 적용이 안되기 때문..!

정렬을 하면 block 요소 안에 있는 inline 요소들만 정렬이 적용된다.

 

-> div에는 적용이 안됨.

 

 

 

 

 

-> inline요소인 button은 적용됨.

 

 

3. transform : translate( n , n );

transform은 요소를 움직이도록 해준다.

translate(n%,n%)는 자기 자신 요소의 퍼센트를 계산해서 그만큼 이동시켜준다.

 파란 상자의 크기는 100 50 이므로 

translate(50%,50%)는 가로 50px, 세로 25px만큼 이동하게 되어 가운데 정렬을 해줄 수 있다.

4. 텍스트 가운데 정렬하기 ( line-height )

텍스트도 text-align : center를 이용하면 가운데 정렬이 되지만 수직 정렬은 되지 않는다.

이럴 때 사용할 수 있는게 line-height를 주어 텍스트의 높이를 지정해줄 수 있다.

 

그러나 이 방법은 텍스트가 한 줄일 때 가능하다ㅎㅎ 

줄 띄우기를 해서 두줄을 만들면 텍스트가 지정해준 line-height만큼 그 다음줄로 넘어가 간격이 너무 많이 벌어지게 된다.......ㅎ 

텍스트가 한줄일때나 쓰기 좋은 방법이다

 

넘어가버림ㅎㅎ