使用Purecss将对象置于网格宽度内

Question

i有一个HTML模板，该模板已集成了PureCSS，因此我可以开始创建一个布局。我的对象为24分式网格的20-24个宽度。我在它所在的网格块内部有一个形式。我想将表单内容集中在该网格中。我不确定如何以有效的方式做到这一点。我尝试添加自己的CSS来覆盖纯CSS默认值，但没有任何人可以帮助我。这就是我的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;
}