title: Center dt elements in dl
body: <p>I have a description list like this:</p>
  
  <pre><code>&lt;h2 class="page-title"&gt;Details&lt;/h2&gt;
  
  &lt;div class="well details-form"&gt;
      &lt;dl class="dl-horizontal text-center"&gt;
          &lt;dt&gt;
            Test 1:
          &lt;/dt&gt;
  
          &lt;dd&gt;
              Test 1
          &lt;/dd&gt;
  
          &lt;dt class="margin-space"&gt;
              Test 2:
          &lt;/dt&gt;
  
          &lt;dd class="margin-space"&gt;
              Test 2
          &lt;/dd&gt;
  
          &lt;dt class="margin-space"&gt;
              Test 3:
          &lt;/dt&gt;
  
          &lt;dd class="margin-space"&gt;
              Test 3
          &lt;/dd&gt;
    &lt;/dl&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>text-center</code> class is a part of the bootstrap library and it only seems to center the <code>dd</code> elements, but not the <code>dt</code> elements.</p>
  
  <p>Here is a <a href="http://www.bootply.com/a6uVpFdVWf" rel="nofollow noreferrer">Bootply</a> to give a visual of my issue.</p>
  
  <p>How do I center the <code>dt</code> elements under the <code>h2</code> element (not directly under, but a little left so that the <code>h2</code> element is in between the <code>dt</code> and <code>dd</code> elements)?</p>
  
  <p>Any help is appreciated.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Picture from the answer provided by mhatch:</p>
  
  <p><a href="https://i.stack.imgur.com/iV2JV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iV2JV.png" alt="enter image description here"></a></p>
  
  <p>The result still looks like this: <a href="http://www.bootply.com/NEDEnNY3RS" rel="nofollow noreferrer">Bootply</a>. Just centered <code>dt</code> elements.. but they aren't moving under the details <code>h2</code> element.</p>
  
  <p><strong>What I am looking for</strong></p>
  
  <pre><code>                                          Details
  
                                      Test 1:     Test 1
                                      Test 2:     Test 2
                                      Test 3:     Test 3
  </code></pre>