Question

我制作了一个登录表单，其中的内容垂直对齐。我应该怎么做才能像Facebook登录页面一样水平排列它？

login.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>

forms.py

class 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形式的类，因为我看到您正在使用引导程序，并且需要添加此类。我加一个例子。 Example w3schools

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

2 个答案: