中心显示：表行UL/LI名单

我有一个调用模板此PHP页面：中心显示：表行UL/LI名单

if(!isset($_GET['step']) || $_GET['step'] == "" || $_GET['step'] == 1) 
{ 
    include("templates/install_db.html"); 
} 
elseif(isset($_GET['step']) && $_GET['step'] == 2) 
{ 
    include("templates/install_settings.html"); 
}

的install_db.html模板：

<head> 
    <link href="templates/css/style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body style="background-color:cadetblue"> 
<div class="title"><h1>...</h1></div> 
<div class="main"> 
    <form action="?step=2" method="post"> 
     <ul> 
      <li> 
       Database Host: 
      </li> 
      <li> 
       <input type="text" name="host" value="localhost" /> 
      </li> 
     </ul> 
     <ul> 
      <li> 
       Database Username: 
      </li> 
      <li> 
       <input type="text" name="uname" /> 
      </li> 
     </ul> 
    </form> 
</div> 
...

而这个CSS样式：

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'; 
}

我想以ul/li列表为中心......如果我删除表格行/表格单元显示适当的列表中心，左边。在我看来，这个清单应该是中心的。我做错了什么？

更新：我用最后的谷歌浏览器版本浏览器

来源

2011-07-24 Sp3ct3R

，我发现自己的解决方案...的text-align属性表行，表芯等显示类型等不适我已经把另外一个<div>放到窗体中，并将该div的显示设置为inline-block，结果如此。

来源

2011-07-27 16:45:52 Sp3ct3R

代码示例可以提高答案的清晰度。 – danielcooperxyz

中心显示：表行UL/LI名单

回答

相关问题