Question

我有一个表单，我希望字段在页面中间居中。目前，表单几乎居中，但字段不是。

这是该视图的图片。您可以看到单词“开始”居中，但表单不是。

表单字段需要居中。就像tumblr布局一样。

在我看来，这是我的标记。

<h1 class="center">Start</h1>
        <form class="create_account"  id="login" action="{{ URL::route('account-create-post') }}" method="post">
        <div class="input-group input-group-lg">
            <div class="form-group">


                <br>
                <input class="form-control input-lg" type='text' name='first_name' required placeholder="First Name"{{ (Input::old('first_name')) ? ' value"' . e(Input::old('first_name')) . '"' : '' }}>
                       <div class="errors">

                </div>
            </div>
            <div class="form-group">

                <br>
                <input class="form-control input-lg" type='text' name='last_name' required placeholder="Last Name" {{ (Input::old('last_name')) ? ' value"' . e(Input::old('last_name')) . '"' : '' }}>
                       <div class="errors">

                </div>
            </div>
            <div class="form-group">

                <br>
                <input class="form-control input-lg" type='email' name='email' required placeholder="Email" {{ (Input::old('email')) ? ' value"' . e(Input::old('email')) . '"' : '' }}>
                       <div class="errors">

                </div>
            </div>
            <div class="form-group">

                <br>
                <input class="form-control input-lg" type='text' name='username' required placeholder="Username" {{ (Input::old('username')) ? ' value"' . e(Input::old('username')) . '"' : '' }}>
                       <div class="errors">


                </div>
            </div>

            <div class="form-group">

                <br>
                <input class="form-control input-lg" type='password' name='password' required placeholder="Password" />
                <div class="errors">

                </div>
            </div>
            <div class="form-group">

                <br>
                <input class="form-control input-lg" type='password' name='password_again' required placeholder="Confirm Password" />
                <div class="errors">

                </div>
            </div>

            <input class="btn btn-primary btn-block" type="submit" value="Start Apologizing">
            <!-- pass token related to session-protects against csrf -->
            {{ Form::token() }}
        </form>

这是我的css

.create_account {
width: 400px;
height: auto;
margin: 0 auto;
text-align: center;
}

.create_account input {
width: 80%;
height: auto;
margin: 0 auto;
}

Answer 1

试试这个：

.input-group {width:80%; margin:0 auto;}
.create_account input {width:100%}

jsfiddle

它有input扩展父级的全宽，在这种情况下，.input-group设置为我想要的80％。

在表单中定位和居中Twitter引导字段

1 个答案: