将我的响应式导航栏中的元素居中

Question

my site上的导航栏居中，但我无法将其中的项目也居中。谁能帮我？

Answer 1

你需要在你的CSS来改变这些：（任何评论属性应该被删除）

.navbar ul { 
    /* letter-spacing: -0.01em; */ 
} 

.navbar .nav { 
    border-right: 2px solid black; 
    /* position: relative; */ 
    /* left: 0; */ 
    display: inline-block; 
    /* float: left; */ 
    margin: 0; 
    /* width: 100%; */ 
    /* height: 10px; */ 
} 


.navbar li { 
    /* width: auto; */ 
    /* display: block; */ 
    display: inline-block; 
    margin-bottom: 0; 
    /* line-height: 40px; */ 
    /* font-size: 14px; */ 
} 

.navbar { 
    text-align: center; 
} 

，并删除了“分频器和垂直” li不是必需的，它不会为您的代码添加语义值。

Answer 2

快速修复：

.navbar .container { 
    text-align:center; 
} 

.navbar .nav { 
    /*float:left;*/ 
    display:inline-block; 
    vertical-align:top; 
} 

.nav-collapse { 
    display:none; 
} 

.navbar .divider-vertical { 
    height:42px; 
} 

由于您的网站看起来反应，你可能要延续到更小的屏幕尺寸时，适当调整风格。

顺便说一句，有趣的新闻标题:)