title: Horizontal center a span element
body: <p>I'm using a span element to create a container for an image with a caption. I want to center the image on it's own line, just like I would center an image using  &lt;center&gt; and &lt;img&gt;.
  When I use the span container with "float", it works, but as soon as I remove the "float" property the I can no longer set the span width.<br></p>
  
  <pre><code>    &lt;span class="imageholder" style="width:150px"&gt;
  &lt;a href="https://gallery.mailchimp.com/37f4256f7c29a1b3335eb535e/images/62f05d38-ae67-40d1-bf14-7773330b8169.jpg" target="new"&gt;&lt;img src="https://gallery.mailchimp.com/37f4256f7c29a1b3335eb535e/images/62f05d38-ae67-40d1-bf14-7773330b8169.jpg" width="100%" alt="Roux and Mary at the Good Food Festival"&gt;&lt;/a&gt;
      &lt;span class="caption" style="width:150px"&gt;Roux and Mary at the Good Food Festival
      &lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/mbxuo76k/2/" rel="nofollow">jsfiddle</a><br>
  The top image is the result I am looking for, minus the container. The middle image shows the container with caption, using "float:left". The bottom image is the one I'm trying to center.</p>
  
  <p>Thank you!</p>