css - 无法将 zurb 基础标注居中

Question

这可能非常容易，但我尝试了很多不同的方法，但无法将这个该死的标注置于中心位置。

<div class="row">
    <div class="large-12 small-12 center columns">
        <div class="radius panel large-4 small-4 columns">
            <div class="row"><input id="loginUserInput" name="loginUserInput" type="text" value="Username" /></div>
            <div class="row"><input id="loginPasswordInput" name="loginPasswordInput" type="password" value="Password" /></div>
        </div>
    </div>
</div>

CSS:

.center {
    margin: auto;
    text-align: center;
}

这是一个 jsfiddle:

http://jsfiddle.net/Sgwtd/

Answer 1

如果您想以基础方式将标注居中，因为您已经在使用它，那么 large-centered 是您的 friend

<div class="radius panel large-4 small-4 columns large-centered">

如果你希望它在桌面和移动 View 中居中，那么你可以添加 small-centered

<div class="radius panel large-4 small-4 columns small-centered large-centered">