title: CSS and positioning a span element inside a div
body: <p>I have a div and I would like to align a span element inside it. The span element should be aligned bottom and horizontally center of its parent div.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="position: relative; clear: both; float: left; border: 2px solid #999999; padding:0; margin:1px; width: 60px; height: 60px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; background: url(/img/img60x60.gif) no-repeat;"&gt;
        &lt;span style="border: none; background-color: green; margin: 0; padding: 0; border: 0; position: absolute; margin-left: auto; margin-right: auto; bottom: 0;"&gt;&amp;nbsp;&amp;nbsp;123.&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>At the same time, the alignment of my span element is not working. The width of the span element will change all the time. I mean that it is not a fixed width element.</p>
  
  <p>I'm looking for help with this, and a cross-browser solution. No JavaScript/jQuery allowed.</p>