Question

我一直想做的是将表单（以及它旁边的两个图标）置于导航栏的死角中心。

我使用了下面的CSS属性，但它并没有精确居中。

text-align: center;

如果您检查下面的JSFiddle，它不是正好在中心。此外，重要的是要知道右侧两个按钮中文本的长度会有所不同。

http://jsfiddle.net/MgcDU/5763/

如何将表单（带有两个图标）置于导航栏中心，注意按钮文本的长度是否可以更改？

Answer 1

这样做，但您需要为.center-form框设置宽度。

<强> CSS

.center-form {
width: 250px;
margin: 0 auto;
text-align: center;
}

Answer 2

.center-form {margin: auto;
              width: 245px;}

Answer 3

您必须使用指定的宽度。否则margin: 0 auto;不起作用。

.center-form {
    width: 250px;    
    margin: 0 auto;
}

请记住，这是margin: 0 auto 0 auto的简写，因为从顶部开始顺时针计算边。

Answer 4

将此添加到您希望放在中心的css类中。

 /* Internet Explorer 10 */
 display:-ms-flexbox;
 -ms-flex-pack:center;
 -ms-flex-align:center;

 /* Firefox */
 display:-moz-box;
 -moz-box-pack:center;
 -moz-box-align:center;

 /* Safari, Opera, and Chrome */
 display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

Answer 5

JSfiddle Updated

.container{
width:100%;
}

.center-form{
margin: 0 auto;
}

添加宽度：100％到.container和margin：0 auto，到.center-form

Answer 6

您可以使用该代码：

.container {
    margin-top: 10px;
    background-color: gray;
    margin: 0 auto;
}

.top-margin {
    margin-top: 15px;
}

.center-form {
    width: 250px;
    margin: 0 auto;
    text-align: center;
}

导航栏中完全居中的形式

6 个答案: