Question

我遇到的问题是导航栏中间的徽标没有居中对齐。这是我的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窗口大小的菜单。

非常感谢你的帮助。

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

Answer 2

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

Navbar中的徽标不居中

2 个答案: