我怎样才能为Django居中对齐(响应)实现形式?

时间:2015-07-30 21:19:17

标签: html css django django-forms materialize

此表单没有响应,并且在更改浏览器大小时不会更改其大小。表格的一半用完了。

<div class="row valign">
    <div class="col s12 m8 offset-m2 l8 offset-l2">
        <div class="card">
<form method="POST" >

        {% csrf_token %}
        {% form form=form %}{% endform %}

      <div style="text-align:center">
          <a href="#!" class="btn waves-effect waves-red z-depth-5"  onclick="Materialize.toast('Thank You!', 4000, 'rounded')">SUBMIT</a>
</div>

    </div>
</div>
</div>

1 个答案:

答案 0 :(得分:1)

我猜你想要水平和垂直居中。为此我个人建议你在你的CSS中使用flex。如果您没有css文件,这是您需要进行设置的第一件事。在这里查看这个问题,以获得关于在Django中执行此操作的全面答案。 Setting up django for css file

CSS

.card {
    display: flex;
    align-items: center;
    justify-content: center;
}

.card form {
    max-width: 100%; /* Handles the responsive part, it will cause your form to scale with a max-width of 100% */
}

查看Chris在CSS Tricks创建的flexbox上的本指南。它非常棒,涵盖了您需要了解的关于居中的一切。 https://duckduckgo.com/?q=complete+guide+to+centering+css