title: Aligning inline-block center
body: <p>What would be the easiest way to center align an inline-block element?</p>
  
  <p>Ideally, I don't want to set a width to the elements. This way depending on the text inputted within the elements, the inline-block element will expand to the new width without having to change the width within the CSS. The inline-block elements should be centered on top of one another (not side by side), as well as the text within the element.</p>
  
  <p>See code below or see on <a href="http://jsfiddle.net/andrewwierzba/bcL023ko/">jsFiddle</a>.</p>
  
  <p>The current HTML:</p>
  
  <pre><code>&lt;div&gt;
    &lt;h2&gt;Hello, John Doe.&lt;/h2&gt;
    &lt;h2&gt;Welcome and have a wonderful day.&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The current SCSS:</p>
  
  <pre><code>@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);  
  
  body {
      margin: 0 auto;
      background: rgba(51,51,51,1);
      font-family: 'Open Sans', sans-serif;
  }
  
  div {
      width: 100%;
      height: auto;
      margin: 15% 0;
      text-align: center;
      h2 {
          margin: 0 auto;
          padding: 10px;
          text-align: center;
          float: left;
          clear: left;
          display: inline-block;
          &amp;:first-child {
              color: black;
              background: rgba(255,255,255,1);
          }
          &amp;:last-child {
              color: white;
              background: rgba(117,80,161,1);
          }
      }
  }
  </code></pre>
  
  <p>Adding a br between the two elements and taking out the float: left/clear: left may be the easiest way; however, I was curious if there was another way going about this.</p>