Center a display:table-row UL/LI list
I have this php page that calls a template:
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");
}
The install_db.html template:
<head>
<link href="templates/css/style.css" rel="stylesheet" type="text/css" /&开发者_高级运维gt;
</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>
...
And this CSS style:
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';
}
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?
UPDATE: I use last google chrome version as browser
I've found myself the solution... the text-align property doesn't apply on table-row, table-cell, etc display types so i've put another <div> into the form and setted the display of that div to inline-block and that worked out.
加载中,请稍侯......
精彩评论