如何在 HTML KickStart 中将宽度 col_4 的内容居中？

【问题标题】：How to center content of width col_4 in HTML KickStart?如何在 HTML KickStart 中将宽度 col_4 的内容居中？
【发布时间】：2013-12-19 10:32:49
【问题描述】：

我有一个表单，我希望它的宽度为 col_4，并使用来自 99lime.com 的 HTML KickStart 在中心。我怎么做？目前我有这个：

<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>

【问题讨论】：

标签： html css html5-kickstart

【解决方案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 类中选择一个宽度。

【讨论】：