title: Center align "span" text inside a div
body: <p>I have a HTML code as;</p>
  
  <pre><code>&lt;div class="left"&gt;
  &lt;span class="panelTitleTxt"&gt;Title text&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS is as follows;</p>
  
  <pre><code>.left {
      background-color: #999999;
      height: 50px;
      width: 24.5%;
  }
  span.panelTitleTxt {
                  display: block;
                  width: 100%;
                  height: 100%;
  }
  </code></pre>
  
  <p>Now how do I center align the span text inside the div? (Assume that the "left" div after the % conversion gets a px width of 100px)</p>
  
  <p>I tried the standard way of using <code>margin:auto</code>, but that is not working.</p>
  
  <p>Also I want to avoid using <code>text-align:center</code>.</p>
  
  <p>Is there some other way of fixing this? </p>