title: CSS: Using text-align: center to centre a DIV using display: inline-block
body: <p>Does anyone have any comments as to the legality of this CSS method to horizontally centre a DIV (with unknown width) inside a parent DIV. The inner DIV is set to 'display: inline-block;' and its containing DIV uses 'text-align: center;'. The 'display: inline-block;' allows the DIV to be considered as an inline element which allows the 'text-align: center;' to act upon it. The outer div is just a demo container. Any comments?</p>
  
  <pre><code>&lt;div style="height: 100px; width: 700px; outline: 1px dotted blue;"&gt;
    &lt;div style="text-align: center;"&gt;
      &lt;div style="width: 100px; height: 50px; display: inline-block; outline: 1px solid red;"&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>