title: How to horizontally center divs with auto widths when using inner elements as display: block?
body: <p>I have something like this:</p>
  
  <pre><code>[ [span][link]              ]
  </code></pre>
  
  <p>but I would like something like this:</p>
  
  <pre><code>[       [span][link]        ]
  </code></pre>
  
  <p>Where the <code>&lt;span&gt;</code> and <code>&lt;a&gt;</code> element inside <code>&lt;div&gt;</code> element are centered in the middle horizontally</p>
  
  <p><code>span</code> and <code>a</code> element have auto width</p>
  
  <p><code>div</code> has hardcoded width 250px</p>
  
  <p>How to do that?</p>
  
  <p>My current CSS code is not working, it's centered to the left ;(:</p>
  
  <pre><code>a {
      margin: 0px; 
      padding: 0px;
      display: block;
      float: left;
      width: auto;
  }
  
  span {
      float: left;
  }
  
  div {
      display: inline;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      width: 200px;
  }
  </code></pre>
  
  <p>and HTML:</p>
  
  <pre><code>&lt;div&gt;
     &lt;span&gt;Name&lt;/span&gt;
     &lt;a href="#"&gt;Link&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>