0

我一直在尝试做的是将表单（及其旁边的两个图标）居中在导航栏中。

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

text-align: center;

如果您查看下面的 JSFiddle，它并不完全位于中心。此外，重要的是要知道右侧两个按钮中的文本长度会有所不同。

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

如何在导航栏中将表单（带有两个图标）居中，注意按钮文本的长度可以改变？

4

6 回答 6

2

这样就可以了，但是您需要为.center-form框设置宽度。

CSS

.center-form {
width: 250px;
margin: 0 auto;
text-align: center;
}
于 2013-07-11T06:13:15.217 回答
2 
.center-form {margin: auto;
              width: 245px;}
于 2013-07-11T06:13:53.637 回答
2

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

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

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

于 2013-07-11T07:25:23.893 回答
0

将此添加到您要放在中心的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;
于 2013-07-11T06:04:32.490 回答
0

JSfiddle 更新

.container{
width:100%;
}

.center-form{
margin: 0 auto;
}

将 width:100% 添加到 .container 和 margin: 0 auto, 到 .center-form

于 2013-07-11T06:14:19.577 回答
0

您可以使用该代码：

.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;
}
于 2013-07-11T06:55:48.637 回答