django html: how to center the login form?-CodePudding

my login form is not looking good, it's too wide. how to make it smaller and center in the middle of the page?

signin html:

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

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

{% block control %}
<form  action="{% url 'login' %}" method="post">
    {% csrf_token %}
    <h2 >Sign In</h2>
    <div >
        <div >
            {{ form.username.errors }}
            {{ form.username.label_tag }}
            {{ form.username }}
        </div>
        <div >
            {{ form.password.errors }}
            {{ form.password.label_tag }}
            {{ form.password }}
        </div>
    </div>
    <label for="signIn" >Click</label>
    <button id="signIn"  >Sign In</button>        
</form>
<form  action="{% url 'signup' %}">
    <button id="signUp" >Sign up now!</button>
</form>
{% endblock %}

base html:

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta CharacterSet='UTF-8'>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{% block title %}{% endblock %}</title>
        {% load static %}
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
        <link rel="stylesheet" href="{% static 'css/style.css' %}">
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="{% static 'js/main.js' %}"></script>
        {% block script %}{% endblock %}
    </head>
    <body>
        <!-- head -->
        <nav id="navbar"  role="navigation">
            <div >
                <div >
                    <a  href="#">Pizza</a>
                </div>
                {% if user is not none %}
                <div id="navbar-collapse" >
                    <ul >
                        {% block nav_list %}{% endblock %}
                    </ul>
                    <form  action="{% url 'logout' %}" method="get">
                        <span>Welcome, {{ user }}.&nbsp;&nbsp;</span>
                        <button id="logout" >Log out</button>
                    </form>
                </div>
                {% endif %}
            </div>
        </nav>
        <!-- body -->
        <div  id="elem_cont">
            {% if message is not none %}
                <div >{{ message.1 }}
                    <button type="button"  data-dismiss="alert">&times;</button>
                </div>
            {% endif %}
            {% block control %}
            {% endblock %}            
        </div>
        <div  id="elem_disp">
            {% block disp %}
            {% endblock %}            
        </div>
        <div  id="elem_misc">
            {% block misc %}
            {% endblock %}            
        </div>
        <!-- footer -->
        <nav  id="nav_footer" role="navigation">
            <div  id="elem_foot">
                <footer  id="footer">
                    <hr>
                    {% block botm_cont %}
                    {% endblock %}
                    <p>&copy; 2019 madlogos</p>
                </footer>
            </div>
        </nav>
    </body>
</html>

CodePudding user response：

This is a styling issue for css.

You already have a css file referred to in your template (css/style.css), so you can add a style like the following to it. This will apply the style only to the form with the class form-signin:

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

64ch is a good width for readability if there's a body of text, but you can tweak if it's not quite where you want the form on your page.

margin: auto will automatically handle the distances between the form and its containing div.

Don't forget to test at a variety of screen sizes. You may want to add a min-width value as well if you have other text on the page.