title: CSS for centered, automatic width div elements, one per line
body: <p>There seems to a plethora of CSS questions available to search, but I haven't managed to find anything that answers my question and none of the solutions happen to do the trick either.</p>
  
  <p>I'd like to have a bunch of divs, one per line, that is centered inside a parent container, and have an automatic width based on their text contents.</p>
  
  <p>The automatic width part I have managed with display: inline-block, but then I end up with the divs next to eachother (as many as can fit inside the parent container).</p>
  
  <p>Any help? Thanks!</p>
  
  <p>EDIT: Also, I have considered going the Table route, would this be the right thing to do (I.e. a table with a single column with multiple rows)</p>
  
  <p>EDIT: An example always makes things clearer...</p>
  
  <p>I have a column with a series of divs:</p>
  
  <pre><code>&lt;div id="giant-column" style="width: 800px; margin: 0 auto;"&gt;
    &lt;div class="column-element" style="margin: 0 auto; display: inline-block;"&gt;
      &lt;div class="text" style="width: 100%; clear: both;"&gt; ... &lt;/div&gt;
      &lt;div class="author" style="float: right;"&gt; ... &lt;/div&gt;
    &lt;/div&gt;
    ...
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like each "column-element" to be only as wide as "text", but centered within the bigger column "giant-column". Does this make sense?</p>