본문 바로가기

728x90
반응형

CSS

(3)
div 및 요소 화면 중앙에 위치시키기 이전 div 화면 중앙 정렬이라는 포스팅을 한 적이있습니다. 하지만 그 방법은 고정 길이가 되어야만 중앙에 위치시킬 수 있었죠. 최근에는 화면의 크기가 유동적이고 변화가 무척 많죠. 그래서 그 코드로는 화면 중앙 정렬이 어려웠습니다. 그래서 발견한 것이 translate를 이용하여 처리하는 것이었습니다. .layer{ display: none; position: fixed; left: 50%; top: 50%; z-index: 9999; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -5..
div 화면 중앙정렬 항상 고민 중이었던 것 중에 하나가 스타일시스이다 웹 개발자로 일하다가 보면 자주 스타일시스를 만나게 되고 개발자라고는 하지만 결국 스타일시스를 사용할 때가 있다. 그중에서 div 태그를 화면 정중앙에 위치시키는 것을 자주 찾아보았다. 계속 찾기 귀찮고 해서 블로그에 포스팅 하기로 하였다. 생각보다 간단하게 처리가 가능하였다. .center { width: 240px; /* 폭이나 높이가 일정해야 합니다. */ height: 86px; /* 폭이나 높이가 일정해야 합니다. */ position: absolute; top: 50%; /* 화면의 중앙에 위치 */ left: 50%; /* 화면의 중앙에 위치 */ margin: -43px 0 0 -120px; /* 높이의 절반과 너비의 절반 만큼 margin..
Div 태그로 가운데 정렬하기 웹프로그래머 생활을 하다가 보니 별걸 다 포스팅하게 되네요 div로 레이어를 다룰때 가운데 정렬을 해야되는 경우가 있죠 이때 Table로 잡던 생각에 text-align:center 요렇게 해보았는데요 전혀 미동도 안하드라구요 그래서 찾다가 보니 전혀 생각지 못했던 방법으로 가운데 정렬시키더라구요 margin:0 auto

728x90
반응형