title: Button Link Formatting - Center and Match Width
body: <p>I've created a couple of simple buttons using a link and some CSS to give it a background and I'm trying to center it on my page. However, because the text in one of the buttons is longer than the other, the buttons are of different sizes and for consistency, I'd like them to be the same width.</p>
  
  <p>How can I keep these buttons the same size? Trying to float them and use percentage widths results in them not being centered. The relevant markup is below.</p>
  
  <pre><code>&lt;section class="buttonsSection"&gt;
      &lt;a class="button" href="#"&gt;Very Long Sentence&lt;/a&gt;
      &lt;a class="button" href="#"&gt;Short Phrase&lt;/a&gt;
  &lt;/section&gt;
  
  
  .button {
      padding: 10px 15px;
      background-color: deepskyblue;
      color: white;
  }
  
  .buttonsSection{
      text-align: center;
      margin-top: 30px;
      margin-bottom: 30px;
  }
  
  .buttonsSection a {
      margin: 3px;
  }
  </code></pre>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/Dragonseer/eTvCp/11/" rel="nofollow">http://jsfiddle.net/Dragonseer/eTvCp/11/</a></p>
  
  <p><strong>Answer</strong>
  While both of the answer below are valid, I'm updating my answer to using Flexbox. <a href="http://caniuse.com/#feat=flexbox" rel="nofollow">Most modern browsers have excellent support for it</a>, including IE11 which will be released in the very near future. Flexbox appears to provide a much better solution to doing complex layouts which requires less effort than it's alternatives, such as floating items.</p>