title: CSS, horizontal distribution + horizontal+vertical centered text
body: <p>I have a list of items, DIVs that I want to look like large squares, that I want to appear in line and centered on my page, distributed horizontally, and with the text inside each of the DIVs centered both vertically and horizontally.</p>
  
  <p>In other words, something like this with three items:</p>
  
  <pre class="lang-none prettyprint-override"><code>|
  |   [........]        [........]        [..Even..]   |
  |   [..Text..]        [MoreText]        [..More..]   |   
  |   [........]        [........]        [..Text..]   | &lt;- page border   
  
      &lt;--------------fixed-total-width-------------&gt;
  </code></pre>
  
  <p>Same with a fourth item inserted:</p>
  
  <pre class="lang-none prettyprint-override"><code>|
  |   [........]  [........]  [........]  [..Even..]   |
  |   [..Text..]  [MoreText]  [........]  [..More..]   |   
  |   [........]  [........]  [........]  [..Text..]   | &lt;- page border   
  
      &lt;--------------fixed-total-width-------------&gt;
  </code></pre>
  
  <p>My constraints:</p>
  
  <ul>
  <li>The overall width (DIVs + interspace) is fixed</li>
  <li>The size of each DIV is fixed</li>
  <li>The number of DIVs is dynamic</li>
  <li>The text content is dynamic</li>
  <li>No Javascript, only HTML and CSS</li>
  </ul>
  
  <p>I have used many combinations of display, align and div structures... The items are either not distributed properly, or the text is not vertically centered, or other glitches appear...</p>
  
  <p>All suggestions are welcome!</p>
  
  <p>Thanks! RS</p>
  
  <p>--</p>
  
  <p>Current CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.container { background-color:#FFFFFF; width:900px; margin:10px auto; }
  .container .item { display:table-cell; text-align:center; width:160px; height:160px; }
  .container .textitem { width:160px; height:160px; display:table-cell; vertical-align:middle;
                         text-align:center; background-color:#CCCCCC; }
  </code></pre>
  
  <p>Current HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container"&gt;
   &lt;div class="item"&gt; &lt;div class="textitem"&gt;Text&lt;/div&gt; &lt;/div&gt;
   &lt;div class="item"&gt; &lt;div class="textitem"&gt;MoreText&lt;/div&gt; &lt;/div&gt;
   &lt;div class="item"&gt; &lt;div class="textitem"&gt;Even more text&lt;/div&gt; &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>