Question

所以，我有一个导航栏，然后是<ul>，里面有一些<li>。我希望它与导航栏.navbar垂直对齐，但它似乎无法正常工作。有没有人知道我做错了什么？

<style>
    .navbar {
  width: 100%;
  height: 90px;
  background: black;
  border-radius: 0px !important;
}
.navbar .logo-holder {
  background-image: url(../img/logo.png);
  width: 75px;
  height: 57px;
  margin-top: 15px;
}
.navbar .sections {
  list-style: none;
  margin-left: 70px;
  margin-bottom: 50px;
}
.navbar .sections li {
  display: inline-block;
  padding: 0 25px 0 0;
  vertical-align: middle;
}
</style>


<nav class="navbar" role="navigation">
        <div class="container">
            <div class="logo-holder"></div>
            <ul class="sections">
                <li><a href="#">Shop</a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Experience</a></li>
                <li><a href="#">Company</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
        </div>
    </nav>

谢谢！

Answer 1

如果我明白你想要实现的目标。然后，您应该使徽标绝对定位，然后可以使用ul对齐line-height。全css：

.navbar {
  width: 100%;
  height: 90px;
  line-height:90px;
  background: black;
  border-radius: 0px !important;
}
.navbar .logo-holder {
  position: absolute;
  top:0;
  left:0;
  background-repeat: no-repeat;
  background-image: url(../img/logo.png);
  width: 75px;
  height: 57px;
  margin-top: 15px;
}
.navbar .sections {
  list-style: none;
  margin-left: 70px;
  margin-bottom: 50px;
}
.navbar .sections li {
  display: inline-block;
  padding: 0 25px 0 0;
}

并更新了fiddle

Answer 2

我将display的{{1}}更改为logo-holder，然后设置inline-block

现在它出现在徽标旁边，并且垂直居中。

请点击此处查看小提琴http://jsfiddle.net/gaurav5430/x7EAg/3/

这是完整的CSS：

vertical-align:middle

Answer 3

我认为正在发生的事情是你的徽标正在推动你的努力。就像上面提到的那样。您可能希望将徽标持有者类浮动。那将允许您根据需要定位您的李。线高是一种方法，你也可以根据需要使用边距，填充或绝对位置。祝你好运。

导航栏垂直对齐不起作用

3 个答案: