html - 我如何居中对齐(响应式)实现 Django 的表单？

Question

此表单没有响应，并且在更改浏览器大小时不会更改其大小。一半表格出卡。

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

Answer 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