html - 使用 PureCSS 使对象在网格宽度内居中

Question

我有一个集成了 PureCSS 的 html 模板，这样我就可以开始创建布局了。我有一个对象，它是 24 分割网格的 20-24 宽度。我在它所在的网格 block 内有一个表单。我想将表单内容置于该网格的中心。我不确定如何有效地做到这一点。我尝试添加自己的 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>

这是我试图用来在 block 中手动居中表单的 css:

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

这是它的样子:

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

Answer 1

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

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

或者(如果可以的话)，切换到 flexbox 并将水平对齐属性应用于其父级:

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