Center a display:table-row UL/LI list_问答_开发者

开发者 https://www.devze.com 2023-03-23 01:40 出处：网络

I have this php page that calls a template: if(!isset($_GET[\'step\']) || $_GET[\'step\'] == \"\" || $_GET[\'step\'] == 1)

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.