title: Center a display:table-row UL/LI list
body: <p>I have this php page that calls a template:</p>
  
  <pre><code>if(!isset($_GET['step']) || $_GET['step'] == "" || $_GET['step'] == 1)
  {
      include("templates/install_db.html");
  }
  elseif(isset($_GET['step']) &amp;&amp; $_GET['step'] == 2)
  {
      include("templates/install_settings.html");
  }
  </code></pre>
  
  <p>The install_db.html template:</p>
  
  <pre><code>&lt;head&gt;
      &lt;link href="templates/css/style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body style="background-color:cadetblue"&gt;
  &lt;div class="title"&gt;&lt;h1&gt;...&lt;/h1&gt;&lt;/div&gt;
  &lt;div class="main"&gt;
      &lt;form action="?step=2" method="post"&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  Database Host:
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;input type="text" name="host" value="localhost" /&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  Database Username:
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;input type="text" name="uname" /&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  ...
  </code></pre>
  
  <p>And this CSS style:</p>
  
  <pre><code>root {
  display: block;
  }
  ul {
      display: table-row;
      text-align: center;
  }
  ul li {
      text-align: center;
      display: table-cell;
  }
  .main {
      text-align: center;
      font-family: 'Lucida Console';
  }
  .title {
      text-align: center;
      font-family: 'Lucida Console';
  }
  </code></pre>
  
  <p>And I would like to center the ul/li list... if I remove the table-row / table-cell dispaly properites the list centers otherways it stay in the left. In my opinion the list should be centered. What do I do wrong?</p>
  
  <p>UPDATE: I use last google chrome version as browser</p>