Question

我正在尝试将html article元素的内容居中。目前，内容与页面的左边距对齐。这是我正在使用的HTML：

<article> 
    <h1>Sign In</h1>
    <div class="display-new">
        <form action="" method="post">
            <div class="label-field">
                <label for="email">Email: </label>
                <input type="text" name="email" />
            </div>
            <div class="label-field">
                <label for="password">Password: </label>
                <input type="password" name="password" />
            </div>
            <input type="submit" value="Sign In" class="submit-button"/>
        </form>
    </div>
    <div class="forgotten-password">
         <a href="../index.php?action=resetpassword">Forgotten your password?</a>
    </div> <!-- end forgotten-password -->
</article>

这是CSS：

html {
    position: relative;
    min-height: 100%;
}

body {
    font-family: sans-serif;
    color: #3e3e3e;
    margin: 0 0 3rem; /* bottom = footer height */
}

footer {
    position: absolute;
    height: 3rem;
    min-width: 100%;
    bottom: 0;
    padding: 0;
    font-size: small;
    background-color: #fff;
    text-align: center;
    /*border: 1px solid red;*/
    margin: 0 auto;
}

p, ul {
    margin: 0 0 1.5em;
    color: #838383;
}

ul {
    list-style: disc;
    padding: 0 0 0 10px;
    top: 0;
}

h1, h2 {
    margin: 0 0 10px;
    font-size: 1.3em;
    font-weight: bold; 
    text-align: center;
}

article {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: medium;
}

.wrapper {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    /*margin-bottom: 50px;*/
    min-height:100%;
}

.content {
    max-width: 60%;
    margin: 0 auto;
    /*padding-bottom: 5em;*/
    min-height: 100%;
    font-size: 1.4rem;
    font-size: 14px;
}


/* ==== FORM classes ==== */
form {
    width: auto;
}

div.display-new {
    margin: 0 auto; 
}

form div.label-field {
    position: relative;
    margin: 0 auto;
    padding: 5px 0;
    text-align: left;
}

form div.label-field label, form div.label-field input {
    display: block;
}

div.forgotten-password {
    margin: 10px auto;
    font-size: smaller;
}

div.forgotten-password a {
    text-decoration: none;
}

这是一个显示问题的fiddle。我不确定这里发生了什么。 StackOverflow上有很多关于居中的问题，Google搜索确定了很多关于这个主题的文章。我已经浏览了很多这些并尝试了各种答案。但是，this回答可能为我的问题提供了一般性线索。麻烦的是我不明白答案是什么。有人可以解释我的理解在哪里吗？也许可以用我的问题作为插图？

Answer 1

好！所以这里发生的是：

您的文章标签是居中的，您可以通过更改标签的背景颜色（我将其更改为红色）快速查看：

您的“display-new”div是导致表单左对齐的div。（再次改变了背景颜色，你可以看到）：

一个选项是为display-new提供一个设置宽度，以便它包含表单。然后使用margin：0 auto，它将居中：

http://jsfiddle.net/hhvbts7L/8/

.display-new {
    width: 150px;
    margin: 0 auto;
    background: blue;
    text-align: left !important;
}

但希望现在知道这一点你可以找到自己的方式！

Answer 2

以textboxes为中心..删除此css上的input

form div.label-field label, form div.label-field input {
    display: block;
}

它看起来应该是这样的

form div.label-field label, form div.label-field {
    display: block;
}

也是文本对齐的中心

form div.label-field {
    position: relative;
    margin: 0 auto;
    padding: 5px 0;
    text-align: center; //<--
}

JSFIDDLE DEMO

Answer 3

以下是您正在寻找的内容，您已将display:block分配到输入字段，因此您应该继续添加margin-left:auto和{{1为了集中文章标签中的输入元素......

Centralized

居中文章标签

3 个答案: