title: How to center a block element without knowing its width?
body: <p>The code below works fine at 1280x800, however, if I add another thumbnail, the width of the <code>&lt;ul&gt;</code> becomes equal to the <code>&lt;body&gt;</code> width and <code>&lt;ul&gt;</code> isn't centered anymore. I don't want to specify the <code>&lt;ul&gt;</code> width, which would solve the problem. I want thumbnails to occupy all free space regardless of resolution, but at the same time having equal margins on the left and right. Is there any pure CSS way of doing this without calculating the <code>&lt;ul&gt;</code>'s width in JavaScript each time the page loads or using CSS3 media queries?</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Gallery&lt;/title&gt;
      &lt;style type="text/css" media="screen"&gt;
          body {
              text-align: center;
          }
          ul {
              padding: 0;
              display: inline-block;
              list-style-type: none;
          }
          li {
              float: left;
              width: 200px;
              background-color: violet;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;ul&gt;
          &lt;li&gt;thumbnail&lt;/li&gt;
          &lt;li&gt;thumbnail&lt;/li&gt;
          &lt;li&gt;thumbnail&lt;/li&gt;
          &lt;li&gt;thumbnail&lt;/li&gt;
          &lt;li&gt;thumbnail&lt;/li&gt;
          &lt;li&gt;thumbnail&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>