title: CSS How to center link elements within a div
body: <p>So I have a div which will contain 3 buttons and I want these buttons centered within the div.</p>
  
  <p>I tried this so far</p>
  
  <pre><code>.centerButtons  
  {
      margin-left: auto;
      margin-right: auto;
      width: 90%;    
  }
  </code></pre>
  
  <p>Which centers the div containing the buttons which is fine, but the actual buttons within this div are not centered..This is my mark up so far..</p>
  
  <pre><code>&lt;div class="clearfixLeft clearfix centerButtons"&gt;
    &lt;xsl:if test="sc:fld('Link One', .)!=''"&gt;
      &lt;div class="fl_left mr_7 mt_10"&gt;
        &lt;div class="green-btn-solid"&gt;
          &lt;sc:link field="Link One"&gt;
            &lt;span class="btnspan"&gt;
              &lt;sc:text select="." field="Link One Text" /&gt;
            &lt;/span&gt;
          &lt;/sc:link&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/xsl:if&gt;
    ...
  &lt;/div&gt;
  </code></pre>
  
  <p>Additional Classes </p>
  
  <pre><code>/* link styles */
  .green-btn-solid {line-height: 21px; height: 21px; background: url(../../images/SOURCE/btn_grn_r.gif) 100% 0 no-repeat; width: auto; display: block; padding-right: 30px; }
  .green-btn-solid span {display: block; float: left; background: url(../../images/SOURCE/btn_grn_l.gif) 0 0 no-repeat; line-height: 21px; height: 21px; padding-left: 12px; color: #fff;}
  </code></pre>