导航栏中的徽标未居中答案

【问题标题】：Logo in Navbar is not centered导航栏中的徽标未居中
【发布时间】：2016-11-25 19:22:31
【问题描述】：

我遇到了导航栏中间的徽标未居中对齐的问题。这是我的 jsfiddle：https://jsfiddle.net/8zekvxqz/

#navbar-primary .navbar-nav {
  width: 100%;
  text-align: center;
}

#navbar-primary .navbar-nav > li {
  display: inline-block;
  float: none;
}

#navbar-primary .navbar-nav > li > a > img{
  display: inline-block;
  float: none;
}

#navbar-primary .navbar-nav > li > a {
  color: green;
  font-size: 2em;
  font-family: 'Holtwood One SC', serif;
}

您可能需要调整 jsfiddle 窗口的大小才能看到我在说什么，因为目前没有媒体查询可以以默认 jsfiddle 窗口大小重新组织菜单。

非常感谢您的帮助。

【问题讨论】：

我认为它是居中对齐的。在较小的屏幕中，它的位置似乎很奇怪，因为图像的宽度是固定的。您可以为图像指定最大宽度，并让徽标在较小的屏幕中变小。如果需要，您可以使用 class="img-responsive"。

标签： html twitter-bootstrap css twitter-bootstrap-2

【解决方案1】：

试试这个：

#navbar-primary .navbar-nav ul{ 
  list-style-type: none; 
  text-align: center; 
}
#navbar-primary .navbar-nav > li {
  display: inline-block;
}

我认为重新定位图像是多余的：

#navbar-primary .navbar-nav > li > a > img{
  display: inline-block;
  float: none;
}

【讨论】：

我很高兴，不客气！请通过投票来帮助我。

【解决方案2】：

如果您想要 Menu 和 关于我们 之间的图像，则需要从 #navbar-primary .navbar-nav > li 中删除 display:inline-block;。

【讨论】：

将其居中，但将其从与导航选择的内联中删除。不过，感谢您的帮助。