문제

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가 첫 번째로 필요한 것이 필요합니다. 이는 이전에 공백 (공간, 탭 또는 라인 피드)이 없음을 의미합니다.

그렇게한다면, 마진 : 자동은 갈 길입니다! :)

마진이라는 참고 사항 : 자동; 메소드는 브라우저가 중앙에있는 품목의 너비와 부모 컨테이너의 너비를 계산할 수있는 경우에만 작동합니다. 대부분의 경우 폭을 설정합니다 : 자동; 작동하지만 일부는 그렇지 않습니다.

이것은 CSS 트릭을위한 편리한 북마크입니다

http://css-discuss.incutio.com/

포함 많이 의 중심 트릭도.

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>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top