Как центрировать контент шириной col_4 в HTML KickStart?

У меня есть форма, и я хочу, чтобы она была шириной col_4 и в центре, используя HTML KickStart от 99lime.com. Как я могу это сделать? В настоящее время у меня есть это:

<div class="grid">
    <div class="col_12">
        <form class="vertical" action="#">
            <input size="5" id="text_email" type="email" name="email" placeholder="Email"><br>
            <input size=50 id="text_alias" type="text" name="alias" placeholder="Alias"><br>
            <input size=50 id="text_password" type="password" name="password" placeholder="Password"><br>
            <button type="submit">Sign up</button>
        </form>
    </div>
</div>

1 ответ

HTML Kickstart использует CSS-плавающие элементы для построения сетки. Чтобы отцентрировать прямоугольник, вам нужно выйти за пределы их сетки.

Возможно, добавьте пользовательский класс в контейнер div, например

<div class="grid">
    <div class="col_4 central">
        <form...

Затем в вашем CSS, попробуйте это:

.grid .central {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

Настройка margin-left & margin-right в auto центрирует div внутри своего родителя (см. http://bluerobot.com/web/css/center1.html). Следует подобрать ширину от col_4 учебный класс.

Другие вопросы по тегам