Полностью центральная форма в navbar

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

Добавьте это в свой класс 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 3

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

Answer 4

JSfiddle Updated

.container{ 
width:100%; 
} 

.center-form{ 
margin: 0 auto; 
} 

добавлена ​​ширина: 100% до .container и маржа: 0 авто, чтобы .center форма

Answer 5

Вы можете используйте этот код:

.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; 
} 

Answer 6

Вы должны использовать указанную ширину . Else margin: 0 auto; не работает.

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

Имейте в виду, что это сокращение для margin: 0 auto 0 auto, так как стороны отсчитываются по часовой стрелке от вершины.