如何水平对齐登录表单的内容

Question

我制作了一个登录表单，其中的内容垂直对齐。我应该怎么做才能像facebook登录页面一样水平排列？登录.html<div class="login-form">        <form method="POST" class="post-form">             {% csrf_token %}            <h2 class="text-center">Log in</h2>            <div class="form-group">                  {{ form | crispy }}                <div id='form-errors'>{{ form_errors }}</div>            </div>              <div class="form-group">                <button type="submit" class="btn btn-primary btn-block">Log in</button>            </div>            <div class="clearfix">                <label class="pull-left checkbox-inline"><input type="checkbox"> Remember me</label>                <a href="#" class="pull-right">Forgot Password?</a>            </div>          </form>        <p class="text-center"><a href="{% url 'register' %}">Create an Account</a></p>    </div>表格.pyclass LoginForm(forms.ModelForm):    class Meta:          model = User        fields = ("username", "password")         labels = {            'username': 'Username',            'password': 'Password'        }这是我的 CSS 文件 login_style.css.login-form {    width: 340px;    margin: 50px auto;}.login-form form {    margin-bottom: 15px;    background: #f7f7f7;    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);    padding: 30px;}.login-form h2 {    margin: 0 0 15px;}.form-control, .btn {    min-height: 38px;    border-radius: 2px;}.btn {            font-size: 15px;    font-weight: bold;}内容即在username与password文本字段或块垂直对齐的，但我想他们在顶部水平对齐，而不是垂直。我该怎么做？先感谢您！

Answer 1

我应该怎么做才能像facebook登录页面一样水平排列？

.login-form {

      width: 100%;

      text-align: center;

    }

内容，即用户名和密码文本字段

<div class="form-group centered">  

    {{ form | crispy }}

     <div id='form-errors'>{{ form_errors }}</div>

</div>

.login-form .centered {

  text-align: center;

}

https://www.w3schools.com/CSS/css_align.asp

Answer 2

我认为您需要放入 form-inline 类，因为我看到您正在使用引导程序并且您需要添加此类。我添加一个例子。示例 w3schools