title: Why isn't this text centering vertically / horizontally?
body: <p>I'm trying to center this text horizontally and vertically, ideally based on percentages (for responsive-ness).  I can't figure out why this isn't working.  </p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/PTSkR/144/" rel="nofollow">http://jsfiddle.net/PTSkR/144/</a></p>
  
  <p>Code: </p>
  
  <pre><code>&lt;div class="row-fluid card-box"&gt;
          &lt;div class="span2 card-box-controls-container"&gt;
              &lt;div class="card-box-controls"&gt;
                  &lt;a &gt;edit&lt;/a&gt;
                  &lt;a &gt;delete&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  
  .card-box .card-box-controls-container {
      height: 160px;
      vertical-align: middle;
      display: inline-block;
      text-align: center;
      color: black;
      font-size: 14px !important;
  
  }
  .card-box .card-box-controls-container .card-box-controls {
      vertical-align: middle;
      display: inline-block;
      text-align: center;
      color: black;
      font-size: 14px;
  
  }
      .card-box .card-box-controls a {
          cursor: pointer !important;
          color: gray;
          text-decoration: none;
          margin: 0;
          vertical-align: middle;
          font-size: 14px;
      }
  
  .card-box {
      background-color: #f5f5f5;
      color: black;
      margin-right: 0px;
      margin-bottom: 15px;
      margin-top: 15px;
      padding: 5px 0 5px 0;
  }
  </code></pre>