Как выровнять содержимое формы входа по горизонтали

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

Я думаю, что вам нужно поместить в класс формы встроенную форму, потому что я наблюдал, что вы используете загрузчик и вам нужно добавить этот класс. Я добавляю пример. Пример w3schools

Answer 2

Что мне нужно сделать, чтобы расположить его горизонтально, как на странице входа в 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