css - Bootstrap中心水平形式

Question

我试图通过设置 text-align:center; 然后设置 display:block-inline; 将水平表单置于英雄单元的中心

>

请参阅 jsfiddle 进行演示 http://jsfiddle.net/bVJZ2/

但这并没有完全起作用，因为复选框和提交按钮不再正确对齐。有什么建议如何解决这个问题吗？

Answer 1

存在一些问题，不允许您将复选框居中。

1. <div class="controls">有一个margin-left 。您不应该将复选框放在该 div 内。

2. input[checkbox]有一个float: left 。您应该使用以下方法删除该 float :

   .radio input[type="radio"], .checkbox input[type="checkbox"] {
       float: none;
   }
   

3. 复选框未对齐。您应该添加vertical-align: top到最后一个选择器。

总结一下:

HTML:

<div class="control-group">
   <label class="checkbox">
       <input type="checkbox"> Remember me
   </label>
   <button type="submit" class="btn">Sign in</button>
</div>

CSS:

.radio input[type="radio"], .checkbox input[type="checkbox"] {
    float: none;
    vertical-align: top;
}

您可以在此处查看结果:http://jsfiddle.net/GW8zk/