中心div不工作

Question

我正在尝试将文本和表单字段输入集中在#registration-code-entry .registration-code-entry-content div

不确定我做错了什么。

http://jsfiddle.net/yLX4F/

<div id="registration-code-entry">
    <div class="registration-code-entry-header"></div>

    <div class="registration-code-entry-middle">
        <div class="registration-code-entry-content">
            <form class="registration-form">

                <div class="field">
                    <input type="text" name="first_name" placeholder="*First Name" class="required" />
                </div>
                <div class="field">
                    <input type="text" name="last_name" placeholder="*Last Name" class="required" />
                </div>
                <div class="field">
                    <input type="email" name="email" placeholder="*Email Address" class="required" />
                </div>
                <div class="field">
                    <input type="text" name="phone" placeholder="Phone Number" />
                </div>

                <div class="field">
                    <input type="checkbox" name="optin">
                    <label for="optin" />Yes, I would like to receive more information</label>
                </div>

                <div class="field">
                    <input type="checkbox" name="accept" class="required" />
                    <label for="accept">*I accept the <a href="#" class="view-official-rules">Official Rules</a>.</label>
                </div>

                <input type="submit" class="submit-btn" value="">
            </form>

        </div>
    </div>

    <div class="registration-code-entry-footer"></div>
</div> 

CSS

#registration-code-entry {
    height: 100px;
    width: 359px;
    position: absolute;
    top: 100px;
    right: 20px;
    background: transparent;

    .registration-code-entry-header {
        top: 0;
        background: transparent url('../images/form-header.png') no-repeat;
        width: 359px;
        height: 17px;
    }

    .registration-code-entry-middle {
        background: #713487;

        .registration-code-entry-content {
            border: 1px solid red;
            width: 350px;
            margin: 0 auto;
            color: #fff;

            form {

                display: inline-block;
                margin: 0 auto;

                .field {
                    margin: 10px 0;

                    input[type="email"], input[type="text"] {
                        padding: 5px;
                    }
                }

                input.submit-btn {
                    background: transparent url('../images/submit-btn.png') no-repeat;
                    width: 168px;
                    height: 59px;
                    display: block;
                    border: 0;
                }
            }
        }
    }

    .registration-code-entry-footer {
        display: block;
        bottom: 0;
        background: transparent url('../images/form-footer.png') no-repeat;
        width: 359px;
        height: 11px;
    }
}

Answer 1

以输入为中心？

这将使它居于中心：

.field input[type="text"], .field input[type="email"] {
    display:block;
    margin: auto;
}

Check This

Answer 2

您可以将text-align: center添加到.field。您还可以将display: block更改为form，以使表单扩展到父级的全宽。

jsfiddle

Answer 3

只需改变你的不足：

 ...
.field {
  margin: 10px 0;
  input[type="email"], input[type="text"] {
    padding: 5px;
    display:block;
    margin:0 auto;
  }
}
...