如何为 Django 居中对齐（响应式）具体化表单？

【问题标题】：How can I center align(responsive) materialize forms for Django?如何为 Django 居中对齐（响应式）具体化表单？
【发布时间】：2015-07-30 21:19:17
【问题描述】：

此表单不响应，并且不会在更改浏览器大小时更改其大小。表格的一半从卡片中消失了。

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

【问题讨论】：

标签： html css django django-forms materialize

【解决方案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

【讨论】：