Центрирование объекта в пределах ширины сетки с использованием PureCSS

Question

У меня есть HTML-шаблон, в который встроен PureCSS, чтобы я мог начать создавать макет. У меня есть объект, который имеет ширину 20-24 из 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;
}