title: how to align horizontal list inside div?
body: <p>i am trying to center my horizontal &lt;ul> inside a &lt;div> (the yellow stripe in my example). the markup is below. i know that if &lt;li> were not floated then i could do it by setting left and right margins on &lt;ul> to "auto", but i do not seem to find a way to get rid of "float" because i need my &lt;li> be block elements so that i could size them. please help!
  thanks
  konstantin</p>
  
  <pre><code>
  &lt;html>
  &lt;head>
      &lt;title>&lt;/title>
      &lt;style type="text/css">
          .container
          {
              background-color: yellow;
          }
          .container li
          {
              border: solid 1px grey;
              display: block;
              float: left;
              height: 100px;
              line-height: 100px;
              list-style-type: none;
              margin: 5px;
              text-align: center;
              width: 100px;
          }
      &lt;/style>
  &lt;/head>
  &lt;body>
      &lt;div class="container">
          &lt;ul>
              &lt;li>&lt;a href="#">x&lt;/a>&lt;/li>
              &lt;li>&lt;div>y&lt;/div>&lt;/li>
          &lt;/ul>
          &lt;div style="clear: both;">
          &lt;/div>
      &lt;/div>
  &lt;/body>
  &lt;/html>
  </code></pre>
  
  <p><hr />
  Demo posted, on OP's behalf, at: <a href="http://jsbin.com/onozu5" rel="nofollow noreferrer">jsbin</a>.</p>