-1

我有一个集成了 PureCSS 的 html 模板，这样我就可以开始创建布局了。我有一个 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;
}

这是它的样子：

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

4

1 回答 1

2

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

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

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

.pure-g {
  display: flex;
  justify-content: center;
}
于 2017-11-29T04:42:59.403 回答