中心顯示：錶行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名單

回答

相關問題