title: Center a span which includes text in a container div when in overflow
body: <p>I have a container div that is 40px x 40px. In it there is an anchor which includes an img that has the same dimensions as the container, and below the img, a span containing a line of text. I'm looking to center the text horizontally with the img. I've tried setting container to tex-align: center, toying with the position elements, and setting the margins to auto. Any help would be appreciated. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="crsContainer"&gt;
      &lt;a class="crsIcon" onclick="return false"&gt;
          &lt;img id="" src="'.$crsRow['iconURL'].'"/&gt;
      &lt;/a&gt;
      &lt;span class="crsTitle"&gt;'.$crsRow['courseTitle'].'&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.crsContainer{
     width: 40px;
     height: 40px;
     position: absolute;
     -webkit-transition: all 1s;
     text-align: center;
     cursor: pointer;
     display: inline-block;
  
   }
  
   .crsIcon{
       position: relative;
       display: inline-block;
  
   }
  
   .crsTitle{
       position: relative;
       top: 5px;
       white-space: nowrap;
       margin: 0 auto;
       color: #3d3d3d;
       text-align: center;
   }
  </code></pre>