Question

我有一个将PureCSS集成到其中的html模板，以便我可以开始创建布局。我有一个24-24分割网格的20-24宽度的对象。我在其所在的网格块内部有一个表单。我想将表单内容置于该网格中。我不确定如何以有效的方式做到这一点。我尝试添加自己的CSS来覆盖纯css默认但它不工作cna任何人都帮助我。这就是我对html模板所拥有的：

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">

  <div class="pure-g">
    <div class="pure-u-lg-20-24 center-item-h">
      <form action="{% url 'searched' %}" method="POST">
        {% csrf_token %}
        <input type="text" name="searched" placeholder="Search">
      </form>
    </div>
  </div>

这是我尝试用来手动将表单放在块中的css：

.center-item-h {
  margin-left: auto !important;
  margin-right: auto !important;
}

这是它的样子：

我摆脱了所有其他不是有问题的块的代码。如果需要，我可以添加所有内容来帮助解决这个问题

Answer 1

要使用边距水平居中，您必须为元素设置width。否则它将不知道如何确定它自己的间距。

.center-item-h {
  margin: 0 auto;
  width: 50%; /* just an arbitrary amount */
}

或者（如果可以的话），切换到flexbox并将水平对齐属性应用于其'父级：

.pure-g {
  display: flex;
  justify-content: center;
}

使用PureCSS

1 个答案: