FF에서 절대 센터링이 작동하지 않습니다

다음과 같은 방법으로 절대 div에 넣기를 원합니다.하지만 어떤 이유에서 파이어 폭스가 div를 맨 위에 올리므로 가로로 가운데에 놓이지 만 수직으로 맨 위입니다. 크롬은 잘FF에서 절대 센터링이 작동하지 않습니다

HTML을 작동합니다

<body> 
<div id="login"> 
      <div id="header">ict <span class="redText">recruit</span></div> 
      <div id="wrapper"> 

        <div class="page-header"> 
         <h1>Login</h1> 
        </div> 
        <div id="loginBox"> 
         <div class="control-group" id="Div1"> 

          <div class="controls"> 
           <label class="control-label" for="firstName1">Password</label> 
          </div> 
         </div> 
         <div class="control-group" id="firstName1g"> 
          <label class="control-label" for="firstName1">Password</label>     
         </div> 
        </div> 
      </div> 
</div> 
</body>

CSS :

#login{ 
    position: relative; 

    text-align:center; 
    width: 100%; 
    height: 100%; 
    display: block; 
} 
#header { 
    position:relative; 
    text-align: left; 
    padding-left: 50px; 
    width: 100%; 
    height: 50px; 
    border-bottom: 3px solid #dc0000; 
    font-family: Leelawadee, sans-serif; 
    font-size: 30px; 
    line-height: 50px; 
} 
.redText { 
    color: rgb(220,0,0); 
} 
#wrapper { 
    margin: 0 auto; 
    position: relative; 
    width: 400px; 
    height: 400px; 
    top: 50%; 
    left: 50%; 
    margin-top: -200px; 
    margin-left: -200px; 
    text-align: left; 
} 
div.page-header h1 { 
    font-family: Leelawadee, sans-serif; 
    font-weight: 300; 
    display: inline-block; 
    padding-bottom: 10px; 
    border-bottom: 3px solid #dc0000; 
} 
#loginBox { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    padding: 30px; 
    background: #e5e5e5; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    border-radius: 15px; 

}

출처

2013-04-12 David Van Staden

내가 가진 요소를 볼 수 없습니다를'absolute' 위치 – Morpheus

DOM의 구조적 요소. 나는 모피어스 말했듯이 당신의 부정적인 여백과 left:50% 및 top:50%

#wrapper { 
    margin: 0 auto; 
    position: relative; 
    width: 400px; 
    height: 400px; 
    text-align: left; 
}

출처

2013-04-12 14:35:15 Brad

방법 것 I 수직 정렬 래퍼 DIV 다음의 의미를 알기 페이지/뷰포트를 기준으로합니까? – DextrousDave

네가 맞아, 고마워. –

이 래퍼에 부정적인 여백을 제거하십시오. 위치를 절대로 설정하십시오. 위쪽 및 왼쪽 비율을 조정하십시오.

jsfiddle

일반적인 규칙, 음의 여백을 사용하는 그 나쁜 생각 ... 특히 그들이 전공을 초래하고 같이 CSS

#wrapper { 
    margin: 0 auto; 
    position: absolute; 
    width: 400px; 
    height: 400px; 
    top: 50%; 
    left: 30%; 
    text-align: left;

}

출처

2013-04-12 14:34:51 MiniRagnarok

감사합니다, 난 당신이 –

을 제거, 당신은 내가이 바이올린 짧은 http://jsfiddle.net/Uwsxu/2/

에서 변경 한 것과 같은 당신의 #wrapper 사업부를 중심으로 다른 접근 방식을 추천 할 것입니다 : 당신은 절대적으로 래퍼상의 위치를 가지고 있지 않습니다.

이 방법을 사용하려면 :

margin: 0 auto; 
    position: relative; 
    width: 400px; 
    height: 400px; 
    top: 50%; 
    left: 50%; 
    margin-top: -200px; 
    margin-left: -200px;

다음 위치가 상대, 절대 또는 고정되지해야합니다.

그래서 나는 래퍼 중심에 대한 다음과 같은 제안 :

#wrapper { 
    margin: 0 auto; 
    position: relative; 
    width: 400px; 
    height: 400px; 
    top: 150px; (+ the 50px for the header, since it is relative to the header as well) 
    text-align: left; 
}

출처

2013-04-12 14:35:37 DextrousDave

FF에서 절대 센터링이 작동하지 않습니다

답변

관련 문제