title: css circle rotation with text inside
body: <p>Can you guys tell me how to make the hallo text to centre inside the circle?
  The circle is not currently working the way it should in IE8 and Firefox.
  Does anyone have any ideas / suggestions that could fix this?
  I have provided a <a href="http://jsfiddle.net/N9r4Y/" rel="nofollow">fiddle</a> </p>
  
  <p>Here is my code below (It is all in my Fiddle above)</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code> .spinner span em {
    border-radius: 999px;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
  }
  
  .spinner span:first-child em {
    left: 100%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-animation-name: rotate-lt; 
    -webkit-transform-origin: 0 50%;
  }
  
  .spinner span:last-child em {
    left: -100%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    -webkit-animation-name: rotate-rt; 
    -webkit-transform-origin: 100% 50%;
   }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="spinner"&gt;
  &lt;span&gt;&lt;em&gt;&lt;/em&gt;&lt;/span&gt;
  &lt;span&gt;&lt;em&gt;&lt;/em&gt;&lt;/span&gt;
  
  hallo
  &lt;/div&gt;
  </code></pre>
  
  <p>Any help would be great!</p>