HTML的網站將不會居中

即使我用HTML的網站將不會居中

#pagewrap { 
    padding: 5px; 
    width: 960px; 
    margin: 0 auto; 
}

我的頁面只是不會中心，任何人都可以理解，爲什麼？新信息：如果我刪除了jQuery Mobile的樣式表，它的中心，添加標籤爲jQuery的移動

**CSS** 



body { 
    font: 1em/150% Arial, Helvetica, sans-serif; 
} 
a { 
    color: #669; 
    text-decoration: none; 
} 
a:hover { 
    text-decoration: underline; 
} 
h1 { 
    font: bold 28px/100% Arial, Helvetica, sans-serif; 
} 

/************************************************************************************ 
STRUCTURE 
*************************************************************************************/ 

#pagewrap { 
    padding: 5px; 
    width: 960px; 
    margin: 0 auto; 
} 
#headline { 
    height: 90px; 
} 
#content { 
    width: auto; 
} 
#formFields{ 
     width: 400px; 
     margin-left:auto; 
     margin-right:auto; 
    } 
#formTitle{ 
    text-align: center; 
} 
#footerdiv { 
    clear: both; 
} 
/************************************************************************************ 
MEDIA QUERIES 
*************************************************************************************/ 
/* for 980px or less */ 
@media screen and (max-width: 980px) { 
    #pagewrap { 
     width: 96%; 
    } 
    #content { 
     width: auto; 
    } 
} 
/* for 700px or less */ 
@media screen and (max-width: 700px) { 
    #content { 
     width: auto; 
    } 
} 
/* for 480px or less */ 
@media screen and (max-width: 480px) { 
    #headline { 
     height: auto; 
    } 
    h1 { 
     font-size: 24px; 
    } 
    #formFields{ 
     width: auto; 
    } 
} 
/* border & guideline (you can ignore these) */ 
#content { 
    background: #f8f8f8; 
} 
#headline, #content { 
    margin-bottom: 5px; 
} 
#pagewrap, #headline, #content, #footerdiv { 
    border: solid 1px #ccc; 
}

HTML

<body> 
<div id="pagewrap" data-role="page"> 
    <div id="headline" data-role="header"> 
     <h1>Lawyers Co.</h1> 
    </div> 
    <div id="content" data-role="content"> 
     <h3 id="formTitle">Incident Details:</h3> 
     <form name="myForm" id="testForm" method="POST" action="send.php"> 
      <div id="formFields"> 
      <label for="firstName">First Name</label> 
      <input type="text" name="firstName" id="firstName" value=""> 
      <label for="lastName">Last Name</label> 
      <input type="text" name="lastName" id="lastName" value=""> 
      <label for="incidentDate">Incident Date</label> 
      <input type="date" name="incidentDate" id="incidentDate"/> 
      <label for="incidentReport"></label> 
      <textarea name="incidentReport" id="incidentReport" value=""></textarea> 
      </div> 
     </form> 
    </div> 
    <div id="footerdiv" data-role="footer"> 
     <h4>footer</h4> 
    </div> 
</div> 
</body> 
</html>

也許是我不知道是什麼爲本，就是，所以我m添加圖片 the right part is much bigger than the left, I would like the page to be equally margined from both sides

來源

2014-01-09 Yoav Schwartz

看起來集中在我身上。 – Quentin

我試了代碼...它的中心 – LcSalazar

這裏的小提琴和作品http://jsfiddle.net/77aaT/embedded/result/ – DaniP

jQuery mobile爲您的pagewrap div（例如class="ui-page ui-body-c ui-page-active"）添加了幾個類。其中一個是添加了殺死你的中心的position:absolute規則。只需將position:relative添加到您的pagewrap div規則中即可恢復居中。

jsFiddle example

#pagewrap { 
    padding: 5px; 
    width: 960px; 
    margin: 0 auto; 
    position:relative; 
}

以下是jQuery Mobile的CSS規則改變位置屬性：

.ui-mobile[data-role=page], .ui-mobile[data-role=dialog], .ui-page { 
    top: 0; 
    left: 0; 
    width: 100%; 
    min-height: 100%; 
    position: absolute; 
    display: none; 
    border: 0; 
}

來源

2014-01-09 14:29:32 j08691

非常感謝！你應該得到更多的選票，而不是所有在jsfiddle中「按原樣」卡住的人，沒有檢查兩次，告訴我它可行。 –

HTML的網站將不會居中

回答

相關問題