4

这可能很简单，但我尝试了很多不同的方法，无法让这个血腥的标注居中。

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

4

4 回答 4

2

如果您想以基础方式将该标注居中，因为您已经在使用它，那么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">
于 2013-05-06T06:51:59.017 回答
1

添加

float:none;
margin: auto;

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

有一个基础媒体查询向左浮动。您甚至可能希望向该 div 添加一个 ID 并将上述样式添加到该 div 中，以防止覆盖任何可能出现的应该浮动的内容。

于 2013-05-03T15:49:36.323 回答
0

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

.center {
  text-align: center;
}

到

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

希望我能正确理解你。

于 2013-05-03T15:37:26.890 回答
0

将此添加到您的样式表中：

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

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

于 2013-05-03T15:52:16.850 回答