CSS 요소를 가운데에 맞출 수 없습니다.

CSS를 사용하여 내 인생의 중심에 사이트를 배치 할 수 없습니다.CSS 요소를 가운데에 맞출 수 없습니다.

body { 
    text-align: center; 
} 
#container { 
    width: 770px; 
    margin: 0 auto; 
    text-align: left; 
}

하는 그런

<div id="container> 
<!-- Centered Content Goes here--> 
</div>

을 사용하지만 그냥 실 거예요 센터로 이동 : I는 다음과 같은 웹 주위 제안 모든 일반적인 방법을 시도했습니다. 그것은 페이지의 왼쪽에 있습니다. , 내가 전에 언급 한 바와 같이

<div id="container> 
<div id="topHeader></div> 
<!-- All other elements go here as well--> 
</div>

을하지만 :

#topHeader 
{ 
    background:url(images/top_header.jpg); 
    position:absolute; 
    width: 695px; 
    height: 242px; 
    top: 0px; 
    left: 0px; 
}

그래서, 내 HTML은 다음과 같을 것이다 :

내가 중심을하려는 요소에 대한 CSS의 예는 이것이다 요소는 그대로 유지됩니다. 감사합니다. Eric

출처

2009-08-28 Eric

가장 중요한 문제는 #topHeader 요소의 절대 위치 지정입니다. top: 0px; left: 0px;으로 절대 위치가 지정되었으므로 페이지의 왼쪽 상단에 정확히 위치 할 것입니다.

#topHeader 요소에서 절대 위치 지정을 제거하여 시작하십시오.

출처

2009-08-28 14:51:52

-2

내가 아는 한 단순히 작동하지 않습니다. text-align은 텍스트 또는 인라인 콘텐츠를 가운데에 배치하고 요소를 차단하지 않습니다.

편집 : 반면에 Disintegrator의 링크는 의미가 있습니다. 불행히도 고정 크기 블록에만 해당됩니다.

출처

2009-08-28 14:44:56

크림슨, 블록 요소의 너비를 미리 알지 못해도 가운데에 배치 할 수 없습니다. –

상위 요소가 아닌 수용 블록 (즉, 본문)에서 오프셋되도록 절대적으로 헤더를 배치합니다. 당신이 원하는 것은 상대적인 포지셔닝입니다.

절대

박스의 위치 (및 크기)을 '상단' '우측', '바닥'및 '왼쪽' 속성으로 지정한다. 이러한 속성은 블록을 포함하는 상자 에 대해 개의 오프셋을 지정합니다. 정상적으로 에 배치 된 상자는 정상 흐름에서 가져옵니다. 즉, 형제의 레이아웃에 영향을 미치지 않습니다. 또한 절대적으로 상자에 여백이있는 경우에도 다른 여백과 함께 이 축소되지 않습니다.

- 9.3.1 Choosing a positioning scheme: 'position' property

절대 :

<html> 
    <head> 
     <style type="text/css"> 
      body { 
       text-align: center; 
      } 
      #container { 
       color:blue; 
       border:1px solid blue; 

       width: 770px; 
       margin: 0 auto; 
       text-align: left; 
      } 
      #topHeader 
      { 
       color:red; 
       border:1px solid red; 

       position:absolute; 
       width: 695px; 
       height: 242px; 
       top: 0px; 
       left: 0px; 
      }  
     </style> 
    </head> 
    <body> 
     outside 
     <div id="container"> 
      inside 
      <div id="topHeader">deep inside</div> 
      <!-- All other elements go here as well--> 
     </div> 
    </body> 
</html>

상대 :

<html> 
    <head> 
     <style type="text/css"> 
      body { 
       text-align: center; 
      } 
      #container { 
       color:blue; 
       border:1px solid blue; 

       width: 770px; 
       margin: 0 auto; 
       text-align: left; 
      } 
      #topHeader 
      { 
       color:red; 
       border:1px solid red; 

       position:relative; 
       width: 695px; 
       height: 242px; 
       top: 0px; 
       left: 0px; 
      }  
     </style> 
    </head> 
    <body> 
     outside 
     <div id="container"> 
      inside 
      <div id="topHeader">deep inside</div> 
      <!-- All other elements go here as well--> 
     </div> 
    </body> 
</html>

출처

2009-08-28 14:45:33 MyItchyChin

이 dead centre

출처

2009-08-28 14:45:44

+1, 나는 그 생각을 좋아했다. –

대단한 예입니다. 내 CSS 기술 속임수 목록에 추가했습니다. –

+1 멋진 리소스. –

시도 요의 상단이 추가로 시도 ur css 파일 :

// Wipes out any preexisting padding and margin. 
html, body { 
    padding: 0; 
    margin: 0; 
}

다음 위치를 추가하십시오. 중심으로 원하는 수업에 대한 지시. 실제로, 모든 클래스가 상대 위치를 사용하도록 html, 본문에 추가하십시오.당신이 가지고 있을지도 모른다 위치 : 절대; 그 다음 왼쪽과 결합되는 세트 : 0px; 머리글이 여백을 무시하도록 강제합니다. 0 자동; 그리고 페이지의 왼쪽에 머물러 라.

출처

2009-08-28 14:47:34

이러한 모든 센터링 방법을 시도 할 때 확인할 사항 중 하나는 사용중인 방법에 대한 doctype이 올바른지 확인하는 것입니다.

희망이 도움이됩니다.

출처

2009-08-28 15:13:47 Chris

CSS 요소를 가운데에 맞출 수 없습니다.

답변

관련 문제