프론트엔드/HTML & CSS

CSS(정렬)

테오구 2021. 8. 28. 12:05
728x90

📌정렬

첫번째는 margin: auto로 div는 block level이라 한줄에 하나씩만 들어올 수 있어서 가능합니다.(단 margin이 수평적으로만 주어지기 때문에 수평 정렬만 가능하다는 점)

 

두번째로는 text-align: center은 이름만 보면 text만 정렬 가능할 것 같지만 block level이아닌곳에도 사용 가능합니다.(단 div는 상자이기 때문에 불가능하고 auto처럼 수평정렬만 가능합니다.)

 

세번째로는 transform: translate(50%, 50%);를 사용하여 이동해주는 기능입니다.

 

네번째로는 text를 가운데 정렬하는 방법인데 line-height를 사용한 방법인데 이 방법의 단점

 

 

원래는 작은 막대기 만큼의 높이였던 아이를 큰 막대기 만큼의 막대기로 바꾸어서 가운데 정렬 하는 것입니다. 이 방법의 단점은: 두줄로 만들게 되면 line-height만큼 더 길어져 넘어갑니다.

 

 

728x90

'프론트엔드 > HTML & CSS' 카테고리의 다른 글

window load  (0) 2021.08.28
WebAPIs(브라우저 좌표)  (0) 2021.08.28
CSS(Responsive web)  (0) 2021.08.28
CSS(Media query, Animation  (0) 2021.08.28
CSS  (0) 2021.08.28