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就是您的朋友

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

如果您希望它在桌面视图和移动视图中都居中，那么您可以添加small-centered

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

Answer 2

添加

float:none;
margin: auto;

到标注的元素<div class="radius panel large-4 small-4 columns">

有一个基础媒体查询将其左侧浮动。您甚至可能要为该div添加一个ID，并将上述样式添加到该div中，以防止覆盖应该浮动的任何潜在事件。

Answer 3

您的班级.center只能对齐文字，但正如我所见，在您的div中，您还有另外两个带有row类和输入字段的div。因此，如果您想将输入字段对齐 - 您需要更改

.center {
  text-align: center;
}

到

 .center {
      margin-left: auto;
      margin-right: auto;
     }

希望我能正确理解你。

Answer 4

将其添加到样式表中：

.center .panel { 
    margin: 0 auto; 
    float: none; 
}

您必须禁用应用于.columns类的浮动，才能使margin: 0 auto;按预期工作。

无法居中zurb基础标注

4 个答案: