title: Center fixed width divs that sit next to each other?
body: <p>I am trying to create a responsive template to be viewed on mobile/desktop. I have 'buttons' that I have created with divs that are floating left to sit side by side each other. I want them to centered because there may be 3 buttons, or 5 buttons or 6 buttons. I want all the buttons to look the same but if there are more buttons to flow down to the next line. </p>
  
  <p>Like so:</p>
  
  <p>-button 1-button-2-button-3-button-4</p>
  
  <p>--------- button 6-button 7 --------</p>
  
  <p>so i don't want to use relative div widths but have it dynamic so that if viewed on a mobile phone it may show</p>
  
  <p>-button 1-</p>
  
  <p>-button 2-</p>
  
  <p>-button 3-</p>
  
  <p>the width container has to be max 80% as that is my template and i want to line it up with an image. </p>
  
  <p>i currently have:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
  margin-left: 10% ;
  margin-right: 10%;
  width: 80%
  }
  
  .buttonbg {
  color: #ffffff;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 24px;
  border: 1px solid #ffffff;
  padding: 10px 14px;
  border-radius: 5px;
  margin: 2px;
  float: left;
  width: 20%;
  min-width: 165px;
  }
  
  a.button {
  color: #ffffff;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
  }
  
  
  #button1 { background-color: rgba(255, 204, 204,1); }
  #button2 { background-color: rgba(255, 153, 153,1); }
  #button3 { background-color: rgba(255, 163, 194,1); }
  #button4 { background-color: rgba(255, 204, 153,1); }
  #button5 { background-color: rgba(255, 245, 245,1); }
  #button6 { background-color: rgba(255, 245, 245,1); }
  
  .buttonbg:hover {
  background-color: #cccccc !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  &lt;div class="buttonbg" id="button1"&gt;&lt;a class="button"
  href="http://client.samanthaongphoto.com/farahandsean" target="_blank"
  alt="Farah &amp;amp; Sean's Wedding Photos by Samantha Ong Photography"&gt;Wedding&lt;br&gt;
  Gallery&lt;/a&gt;&lt;/div&gt;
  &lt;div class="buttonbg" id="button2"&gt;&lt;a class="button" href="slideshow/"
  target="_blank"
  alt="Farah &amp;amp; Sean's Wedding Slideshow by Samantha Ong Photography"&gt;Wedding&lt;br&gt;
  Slideshow&lt;/a&gt;&lt;/div&gt;
  &lt;div class="buttonbg" id="button3"&gt;&lt;a class="button" href="slideshow/"
  target="_blank"
  alt="Farah &amp;amp; Sean's Wedding Slideshow by Samantha Ong Photography"&gt;Wedding&lt;br&gt;
  Slideshow&lt;/a&gt;&lt;/div&gt;
  &lt;div class="buttonbg" id="button4"&gt;&lt;a class="button" href="slideshow/"
  target="_blank"
  alt="Farah &amp;amp; Sean's Wedding Slideshow by Samantha Ong Photography"&gt;Wedding&lt;br&gt;
  Slideshow&lt;/a&gt;&lt;/div&gt;
  &lt;div class="buttonbg" id="button5"&gt;&lt;a class="button" href="slideshow/"
  target="_blank"
  alt="Farah &amp;amp; Sean's Wedding Slideshow by Samantha Ong Photography"&gt;Wedding&lt;br&gt;
  Slideshow&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>as you can see, the buttons are aligning left. can anyone help? thanks!</p>