Django html: как центрировать форму входа в систему?

моя форма входа выглядит не очень хорошо, она слишком широкая. как сделать ее меньше и расположить по центру страницы?

enter image description here

signin html:

{% extends "accounts/_base.html" %}

{% block title %}
Sign In
{% endblock %}

{% block control %}
<form class="form-signin" action="{% url 'login' %}" method="post">
    {% csrf_token %}
    <h2 class="form-signin-heading">Sign In</h2>
    <div class="form-group">
        <div class="fieldWrapper">
            {{ form.username.errors }}
            {{ form.username.label_tag }}
            {{ form.username }}
        </div>
        <div class="fieldWrapper">
            {{ form.password.errors }}
            {{ form.password.label_tag }}
            {{ form.password }}
        </div>
    </div>
    <label for="signIn" class="sr-only">Click</label>
    <button id="signIn" class="btn btn-lg btn-primary btn-block" >Sign In</button>        
</form>
<form class="form-signin" action="{% url 'signup' %}">
    <button id="signUp" class="btn btn-lg btn-default btn-block">Sign up now!</button>
</form>
{% endblock %}

base html:

Это проблема стиля для css.

У вас уже есть css-файл, на который ссылается ваш шаблон (css/style.css), поэтому вы можете добавить в него стиль, подобный следующему. Это применит стиль только к форме с классом form-signin:

form.form-signin {
    max-width: 64ch;
    margin: auto;
}

64ch - это хорошая ширина для удобочитаемости, если есть текст, но вы можете изменить ширину, если форма не совсем там, где вы хотите видеть ее на вашей странице.

margin: auto будет автоматически обрабатывать расстояния между формой и содержащим ее div.

Не забудьте протестировать на разных размерах экрана. Вы можете добавить значение min-width, если на странице есть другой текст.

Вернуться на верх