가운데 정렬
-
세로정렬(가운데 정렬)! 웹 공부 ! 2018. 3. 12. 19:49
html & css를 하다 보면 세로 정렬을 하다가 화가 난 적이 한 두번이 아니다. display: table-cell을 적용한 후 vertical-align: middle 을 적용을 해도 엉뚱하게 나오는 일이 한 두번이 아니다. cssdiv{position: absolute;을 3차원으로 바꾸는 작업을 해야 한다.top: 50%;위에서 50% 띄우기 transform: translateY(-50%);2차원 평면 상에 수직 요소를 -50%씩 옮기기-webkit-transform: translateY(-50%);}
-
가로정렬(가운데 정렬)! 웹 공부 ! 2018. 3. 7. 15:26
html & css을 하다보면 가로 정렬에 애를 먹는 경우가 종종 있다. text-align: center 속성을 넣어도 적용이 되지 않고 margin:0 auto를 넣어도 적용이 안되는 경우가 종종 있다. 그럴 경우 사용하는 ! TIP ! html 파일의 div를 가운데 정렬을 한다면 . cssdiv{ width: 100px; 넓이값 position: relative;/ position: absolute; 속성을 3차원으로 바꾸는 작업을 해야 한다. left: 50%; 왼쪽으로 50% 이동 margin-left: -50px; 넓이의 절반을 다시 오른쪽으로 이동} 이런 방식으로 하면 좀 더 편하게 가운데 정렬을 할 수 있다.