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

【问题标题】：Center the elements in my responsive navigation bar在我的响应式导航栏中将元素居中
【发布时间】：2014-03-24 16:47:51
【问题描述】：

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

【问题讨论】：

您希望它们均匀分布还是什么？另外，您应该在问题本身中提供相关代码

标签： css responsive-design centering navigationbar

【解决方案1】：

快速修复：

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

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

.nav-collapse {
    display:none;
}

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

由于您的网站似乎是响应式的，因此您可能希望在缩小屏幕尺寸时适当地调整样式。

顺便说一句，有趣的新闻头条:)

【讨论】：

【解决方案2】：

您需要在您的 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;
}

并删除“.divider-vertical” li，不需要，它不会为您的代码添加任何语义值。

【讨论】：