title: How to center my <h3> text using css?
body: <p>I have the following <a href="http://jsfiddle.net/mauricederegt/z2rTw/1/" rel="noreferrer">fiddle</a></p>
  
  <p>The <code>HTML</code> is created by <code>javascript</code>. I can add/change the styles to the <code>div's</code> if needed but I cannot change the order of the HTML code. </p>
  
  <p>I know I can use:</p>
  
  <pre><code>text-align: center;
  </code></pre>
  
  <p>But there is a catch :) The <code>div</code> containing the 4 images is put in the <code>HTML</code> code before the <code>&lt;h3&gt;</code> is. Since I cannot edit the <code>HTML</code> order I figured to lower the <code>DIV</code> with the images using <code>margin-top: 70px;</code> The problem is that this has an effect on the text in the <code>&lt;h3&gt;</code> which isn't <code>centered</code> anymore.</p>
  
  <p>How to solve this? (pref with css3)</p>
  
  <p>It's okay if the values of the <code>DIV's</code> in the <code>HTML</code> need to be changed in order to fix it
  (I can change them)</p>
  
  <p>Thanks a lot</p>
  
  <p>The HTML code:</p>
  
  <pre><code>&lt;div class="solitaireprefs" style="position: absolute; left: 0px; top: 0px; width: 80%; height: 80%; z-index: 100;"&gt;
  &lt;form method="get" action=""&gt;
      &lt;div style="float: right; margin-top: 70px; display: table; vertical-align: bottom;"&gt;
          &lt;div&gt;&lt;img src="cardsets/test/spades1.svg" alt="Ace spades" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"&gt;&lt;img src="cardsets/test/clubs7.svg" alt="7 clubs" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="cardsets/test/hearts12.svg" alt="Queen hearts" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"&gt;&lt;img src="cardsets/test/backred.svg" alt="Card" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;h3&gt;Options&lt;/h3&gt;
      &lt;h4&gt;Images for size 119&lt;/h4&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>div.solitaireprefs {
      background-color: #fff;
      border-radius: 7px; 
      border: 1px solid #ddd;
  }
  
  div.solitaireprefs form {
      padding: 0 15px;
  }
  
  div.solitaireprefs h3 {
      background: #e9e9e9;
      margin: 0 -15px;
      padding: .7em 0;
      text-align: center;
      border-radius: 7px 7px 0 0 ; 
  }
  </code></pre>