title: CSS sliding-door buttons center alignment
body: <p>I need help to align CSS buttons. I tried many different variations and I just cannot center my button the way I want.</p>
  
  <p>Firstly, have a look at this url: <a href="http://www.front-end-developer.net/cssbuttons/example.htm" rel="nofollow noreferrer">http://www.front-end-developer.net/cssbuttons/example.htm</a></p>
  
  <p>I'm using 2 images to form a button (this could be done on 1 image, but in this case we've got two). Everything works as expected as long as we apply <code>float:left</code> or <code>float:right</code> to the parent div element, to 'limit' width of the div and close it as soon as the content of the div ends. You can remove float:left from the button to see what I mean.</p>
  
  <p>But what about center positioned buttons? I cannot add float:left/right because I want align it in the middle.</p>
  
  <p>In theory, I could set</p>
  
  <pre><code>{
      width:XXpx;
      margin:0 auto;
  }
  </code></pre>
  
  <p>And I will get what you can see on this picture:</p>
  
  <p><a href="https://i.stack.imgur.com/RkvJe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RkvJe.png" alt="alt text"></a><br>
  <sub>(source: <a href="http://www.front-end-developer.net/cssbuttons/cssbuttonerror.png" rel="nofollow noreferrer">front-end-developer.net</a>)</sub>  </p>
  
  <p>But I don't know the length of the text inside. Having different translations my button can be very short, or 5 times that long.</p>
  
  <p>I also tried to use <code>&lt;span&gt;</code> instead of <code>&lt;div&gt;</code>, but unfortunately nested inline elements don't respect their padding correctly...</p>
  
  <p>And yes, I must use <code>&lt;a&gt;</code> inside, so buttons can be accessed by web crawlers.</p>
  
  <p>I'm really stuck on this one.</p>