HTML
-
div 세로 중앙 정렬팁 - 02(display: table)CODING/HTML & CSS 2018. 10. 23. 17:28
종종 사이트를 제작할 때 화면의 세로 가운데에 요소를 배치해야 되는 경우가 있는데 가로 가운데 배치는 margin:0 auto; 나 text-align:center을 사용하면 되지만 세로로 가운데 정렬하는 경우에는 보통은 javascript로 top 값을 지정 했었다.그러나 css의 display:table과 table-cell 속성을 이용하면 좀 더 쉽게 세로 가운데 정렬을 구현할 수 있다.HTML 세로로 가운데 정렬 CSS.modal-table{display:table;position:relative;width:100%;height:200px;border:2px solid #666;} .modal-cell{display:table-cell;vertical-align:middle;} .box{displ..
-
div 세로 중앙 정렬팁 - 01(line-height, :after)CODING/HTML & CSS 2018. 10. 23. 17:18
line-height 속성을 이용해서 높이를 알 수 없는 이미지를 세로 중앙 정렬 하는 것이 가능하다. https://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> line-height 값을 박스의 높이와 같은 값을 지정하고 안의 이미지를 vertical-align: middle을 사용해서 정렬한다. content 속성을 이용해서 공백을 넣었기 때문에 좌우 정렬은 약간의 오차가 발생할 수 있다. 출처 : https://www.xpressengine.com/tip/22835216