문제
CSS 만 사용하여 XHTML 요소를 중심하는 데 가장 좋아하는 방정식은 다음과 같습니다.
display: block;
position: absolute;
width: _insert width here_;
left: 50%;
margin-left: _insert width divided by two & multiplied by negative one here_
브라우저에는 더 간단한 마진 : 자동 방법이 있습니다. 컨텐츠를 컨테이너 중앙에 표시하도록 강요하는 까다로운 방법이 있습니까? (수직 센터링을위한 보너스 포인트)
편집 - 죄송합니다. 왼쪽의 마진에서 '부정적인'부분을 잊어 버렸습니다. 결정된.
해결책
마진으로 고수 : 0 Auto; 수평 정렬의 경우; 수직 정렬이 필요한 경우 사용 위치 : 절대; 상단 : 50%; 마진 -탑 : -(너비/2) px; 그러나 컨테이너가 화면보다 너비가 더 높으면 위치를 사용하여 왼쪽에서 화면이 떨어집니다. 절대 메소드.
다른 팁
div #centered{
margin: 0 auto;
}
내 경험에서 가장 신뢰할 수있는 것 같습니다.
글쎄, 그것은 거대한 과잉처럼 보인다. 컨테이너를 설정하는 경향이 있습니다 text-align:center;
오래된 브라우저의 경우 margin:auto;
현대식 브라우저의 경우, 그렇게 남겨 두십시오. 그런 다음 요소에서 텍스트 정렬을 재설정하십시오 (텍스트가 포함 된 경우).
물론 어떤 것들은 블록으로 설정이 필요하고 너비는 설정이 필요합니다 ... 그러나 지구상에서 무엇이 필요한 스타일을 만들려고합니까? 저것 많은 해킹?
<div style="text-align:center">
<div style="width:30px; margin:auto; text-align:left">
<!-- this div is sitting in the middle of the other -->
</div>
</div>
마진 : IE가 표준 모드에 있는지 확인하는 한 모든 브라우저에서 자동 작동합니다.
그것은 다른 사람들보다 까다 롭고 문서에서 DocType가 첫 번째로 필요한 것이 필요합니다. 이는 이전에 공백 (공간, 탭 또는 라인 피드)이 없음을 의미합니다.
그렇게한다면, 마진 : 자동은 갈 길입니다! :)
마진이라는 참고 사항 : 자동; 메소드는 브라우저가 중앙에있는 품목의 너비와 부모 컨테이너의 너비를 계산할 수있는 경우에만 작동합니다. 대부분의 경우 폭을 설정합니다 : 자동; 작동하지만 일부는 그렇지 않습니다.
50% 접근 방식의 절대 위치는 브라우저 창이 더 좁은 경우 요소가 브라우저의 왼쪽에 나타나며 스크롤 할 방법이 없다는 심각한 부작용이 있습니다.
자동 마진을 고수하십시오 - 그들은 훨씬 더 신뢰할 수 있습니다.
표준 모드에서 작업하는 경우 (귀하가되어야하는 경우) 관심있는 모든 브라우저에서 지원됩니다.
Internet Explorer 5.5 이상을 실제로 지원 해야하는 경우 텍스트 정상 해킹을 사용할 수 있습니다.
body {
text-align: center;
}
#container {
width: 770px;
margin: 0 auto;
text-align: left;
}
이것은 모든 일반적인 브라우저에서 잘 작동합니다. 이미 언급했듯이 margin: 0 auto;
모든 반 전류 버전의 IE에서 작동하지 않습니다.
이 시도; IE에서 작동하는지 모르겠지만 FX에서 잘 작동합니다. CSS 만 사용하여 페이지의 DIV 블록을 중심으로 (JavaScript 없음), 마진-아우토가 없으며 DIV 블록 내의 텍스트는 여전히 정렬되어 있습니다. 나는 수직 중심이 그런 식으로 작동 할 수 있는지 알아 내려고 노력하고 있지만 지금까지는 성공하지 못했습니다.
<html>
<head>
<title>Center Example</title>
<style>
.center {
clear:both;
width:100%;
overflow:hidden;
position:relative;
}
.center .helper {
float:left;
position:relative;
left:50%;
}
.center .helper .content {
float:left;
position:relative;
right:50%;
border:thin solid red;
}
</style>
</head>
<body>
<div class="center">
<div class="helper">
<div class="content">Centered on the page<br>and left aligned!</div>
</div>
</div>
</body>
</html>