Question

即使我用过

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

我的页面不会居中，任何人都可以理解为什么？新信息：如果我删除了jQuery移动样式表，它是jQuery-Mobile

的标记

**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>

也许我不确定集中意味着什么，所以我正在添加一张图片 the right part is much bigger than the left, I would like the page to be equally margined from both sides

Answer 1

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;
}

以下是更改position属性的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;
}

HTML网站不会居中

1 个答案: