-1

I have an html template that has PureCSS integrated into it so that I can start creating a layout. I have an object that is 20-24 width of a 24 split up grid. I have a form inside of the grid block it is in. I want to center the form content within that grid. I am not sure how to do that in an effective way. I tried adding my own css to override the pure css default but it is not working cna anyone help me. this is what I have for the html template:

<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>

Here is the css that I tried to use to manually center the form in the block :

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

Here is what it looks like:

I got rid of the all the code of everything else that is not the block in question. I can add all the content if required to help solve this answer

Omar Jandali
  • 814
  • 3
  • 20
  • 52
  • Take a look at this CodePen example of a few practical demonstrations on how to horizontally align arbitrary block elements: https://codepen.io/UncaughtTypeError/pen/vWGbdb – UncaughtTypeError Nov 29 '17 at 05:12
  • Please share your complete css, or provide working snippet/fiddle. I have try put your code on fiddle, i can't see anything. just text and input box. – Andre Ramadhan Nov 29 '17 at 05:48

1 Answers1

2

To horizontally center using margins you have to set a width to the element. Otherwise it won't know how to determine its' own spacing.

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

Alternatively (and if you can), switch over to flexbox and just apply the horizontal alignment properties to its' parent:

.pure-g {
  display: flex;
  justify-content: center;
}
Carl Edwards
  • 13,826
  • 11
  • 57
  • 119
  • that didnt change anything. IDK why. – Omar Jandali Nov 29 '17 at 05:02
  • You might want to declare a `display: block` property rule on your first example to complete the "block" element requirements. Then throw in a `display: inline-block` horizontal aligning example for good measure as well. This should cover all standard cases. – UncaughtTypeError Nov 29 '17 at 05:16
  • We'd have to assume that the div is inherently a block element unless OP is hiding something from us. – Carl Edwards Nov 29 '17 at 05:19