title: Centering floating list items <li> inside a div or their <ul>
body: <h3>HTML:</h3>
  <pre><code>&lt;div class=&quot;imgcontainer&quot;&gt;
      &lt;ul&gt;
              &lt;li&gt;&lt;img src=&quot;1.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src=&quot;2.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;
              .....
      &lt;/ul&gt;
  &lt;/div&gt;  
  </code></pre>
  <p>I'm coding a simple gallery page by creating unordered list and each list item of it contains an image.</p>
  <pre><code>    ul li {
          float: left;
      }
  </code></pre>
  <p>I set the width of  the  container as &quot;max-width&quot; so I can make possible to fit the list items (images) to the browser width.. meaning that they will be re-arranged when the browser window re-sized.</p>
  <pre><code>    .imgcontainer{
          max-width: 750px;
      }
  </code></pre>
  <p>Now the problem is those images or list items are not aligned to center, they are aligned to the left of .imgcontainer body (colored gray in the attached link below), leaving a space on the right when the window re-sized!</p>
  <p><img src="https://i.stack.imgur.com/mhAXw.jpg" alt="enter image description here" /></p>
  <p>How can I center those images every time the window resized?</p>
  <p>Here's the whole page/code you can preview it or edit it at JS Bin</p>
  <p><a href="http://jsbin.com/etiso5" rel="noreferrer">http://jsbin.com/etiso5</a></p>