title: Auto-center div content horizontally in last row if there are 1 or 2 divs present
body: <p>All right so I have a bit of an odd request to try and fulfill. I have a page that has a listing of divs, inside of which are an image and a link. Each row has 3 divs max. Sometimes, though, the last row may have just 1 or 2 divs. What I need to try and do is set things up so that if the last row only has 1 or 2 divs, then those divs need to be centered horizontally within their row. </p>
  
  <p>Is this something that is possible? Would I need to use JavaScript/jQuery to count the number of divs in the final row? Or could I do this all with just CSS?</p>
  
  <p>Here is how the divs are setup right now:</p>
  
  <pre><code>  &lt;div class="About-Categories clearfix"&gt;
      &lt;div class="About-Category clearfix"&gt;
          &lt;img src="[image url]" class="image"&gt;
          &lt;a href="#"&gt;[link text]&lt;/a&gt;
       &lt;/div&gt;
       &lt;!--Additional About-Category divs go here as needed--&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>There could be any number of About-Category divs, but the css is setup to ensure that there are only 3 About-Category divs within the width of the page (until a screen size of 460px is reached).</p>
  
  <p>CSS as it is now:</p>
  
  <pre><code>.About-Categories{
    text-align: center;
  }
  .About-Category{
    float: left;
    height: auto;
    margin-left: 0%;
    margin-top: 0px;
    display:inline-block;
    padding: 30px;
    width: 33%;
    &amp;:nth-of-type(1){
      clear: both;
    }
  }
  </code></pre>