Центрирование дисплея: список строк таблицы UL / LI - PullRequest
Новая
       33

Центрирование дисплея: список строк таблицы UL / LI

1 голос
/ 24 июля 2011

У меня есть php-страница, которая вызывает шаблон: 

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 ... если я удалю дисплеи table-row / table-cell, то они корректируют центры списка, в противном случае он остается слева. На мой взгляд, список должен быть в центре. Что я делаю не так?

ОБНОВЛЕНИЕ: я использую последнюю версию Google Chrome в качестве браузера

1 Ответ

1 голос
/ 27 июля 2011

Я нашел себе решение ... свойство text-align не применяется к типам отображения строк таблицы, ячеек таблицы и т. Д., Поэтому я поместил еще одну <div> в форму и установил отображениеиз этого div до inline-block, и это сработало.

...