반응형
브라우져의 중앙에 로그인 Form을 위치 시키는데 가장 많이 사용될것 같은데요. 간단하지만 의외로 로그인 폼 이외에는 잘 사용을 안하는지라 (개인적 생각) 자주 까먹고 구글링해서 항상 찾는 소스이기도 합니다.
1. css
body {
margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;
background:#323333; -webkit-text-size-adjust: none;
background-image:url(../images/loginbg.jpg);
background-repeat: repeat-x;
}
div.centerOuter {
position: absolute;
top: 50%; left: 50%;
margin: -210px 0 0 -290px;
width: 540px; height: 380px;
border: 10px solid forestgreen;
padding: 10px;
background-color: lightgreen;
}
div.centerInner {
position: absolute;
top: 50%; left: 50%;
margin: -90px 0 0 -130px;
width: 240px; height: 160px;
border: 10px solid orange;
background-color: yellow;
font: 2em "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: darkbrown;
text-align: center;
}
2. html
<div class="centerOuter">
<div class="centerInner">Center</div>
</div>
3. 결과
반응형
'프로그램' 카테고리의 다른 글
[html, css] height 100% 높이 레이아웃 간단한 정리 (0) | 2022.10.25 |
---|---|
html 이란 무엇알까 배워야하는 프로그램일까? (0) | 2022.10.20 |
[html, css] height 100% 높이의 레이아웃잡기 (0) | 2021.12.15 |
[ jquery ] div의 id 값을 찾아 텍스트 변경는 방법 (0) | 2013.10.08 |
ctrl+z, ctrl+d, ctrl+c 의 차이점 (0) | 2013.07.10 |
댓글