Question

在Stack Overflow上进行了大量搜索后，我无法回答真正应该简单修复的问题：如何将导航栏置于中心位置？

现在，在您将此标记为重复之前，请考虑我的代码和我的问题。

我正在尝试制作一个看起来像这样的导航栏。 http://computersciencenow.weebly.com/

链接是整个栏的中间位置。

这是我的导航栏HTML：

<div id = "navbar">
            <header>
                <div class="nav">
                    <ul>
                        <li id="img" width = "350"><img src="res/shahind.png" alt="Shah Industries" height = "150" width = "350" /></li>
                        <li class="home"><a class="active" href="#">HOME</a></li>
                        <li class="tutorials"><a href="#">ABOUT</a></li>
                        <li class="about"><a href="#">MISSION</a></li>
                        <li class="news"><a href="#">CONTACT</a></li>
                    </ul>
                </div>
            </header>
        </div>

这是CSS

@import url(http://fonts.googleapis.com/css?family=Maven+Pro:400);

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}

.img{
    text-align: left;
}


.nav ul {
  list-style: none;
  background-color: #444;
  padding: 0;
  margin: 0;
  vertical-align: middle;
    overflow: hidden;
}
.nav li {
  font-family: 'Maven Pro', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888;
  text-align: center;

}

header{
    vertical-align:center;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
  vertical-align: middle;
  margin: 0;


}

.nav a:hover {
  background-color: #005f5f;
}

.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: pointer;
}

#img{
    width:350px;
    text-align: left;
    cursor: default;
}
@media screen and (min-width: 600px) {
  .nav li {

    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
      }



  .nav li {
    display: inline-block;
    margin-right: -4px;
  }

完整代码在这里http://codepen.io/anon/pen/zGojxX

Answer 1

它可以像它一样简单 - vertical-align: middle;

以下是简化演示：

.nav {
    list-style: none;
}
.nav li {
    display: inline-block;
    vertical-align: middle;
}

<div class="nav">
    <ul>
        <li><img src="//dummyimage.com/100x100" /></li>
        <li class="home"><a href="#">HOME</a></li>
        <li class="tutorials"><a href="#">ABOUT</a></li>
        <li class="about"><a href="#">MISSION</a></li>
        <li class="news"><a href="#">CONTACT</a></li>
    </ul>
</div>

Answer 2

如果您喜欢其他网站的工作方式，您可以随时右键点击并选择查看来源＆＃39;在上面。如果您在要复制的网站上执行此操作，您将看到其余图像不在列表中。

以下是其他人使用的代码。你会看到他们将图像放在一个单独的div中

<div id='header'>
        <div class='header-wrap'>
            <div class='logo'>
                <span class='wsite-logo'><a href='/'><img src='/uploads/3/9/2/2/39229753/1410676966.png' style='margin-top:1px;max-height:118px;' /></a></span>
            </div>
            <div class='menu'
    <ul class='wsite-menu-default'><li id="active"><a href="/">Home</a></li><li id='pg551601871401491579'><a href="/our-mission.html" data-membership-required="0" >Our Mission</a></li><li id='pg551272351721461114'><a href="/private-lessons.html" data-membership-required="0" >Private Lessons</a></li><li id='pg661448056549841030'><a href="https://www.youtube.com/user/learnprogrammingCS" data-membership-required="0"  target='_blank'>Youtube</a></li><li id='pg927757866254746423'><a href="/become-a-teacher.html" data-membership-required="0" >Become A Teacher</a></li><li id='pg206710261896176825'><a href="/boot-camp-for-dummies.html" data-membership-required="0" >Boot Camp for Dummies</a></li></ul>
            </div>
        </div>
    </div>

如何垂直居中导航栏？

2 个答案: