导航栏中的垂直对齐链接和徽标答案

【问题标题】：vertical align links and logo in nav bar导航栏中的垂直对齐链接和徽标
【发布时间】：2016-11-25 20:48:16
【问题描述】：

我在垂直对齐列表中的链接和徽标时遇到问题，知道我能解决什么问题吗？这是codepen中的代码。 http://codepen.io/tacoxlegendary/pen/VjXqkA?editors=1100

<body>
<nav>
    <div class="wrapper ">

        <ul class="cf">
            <li id="logo">LOGO</li>

            <li>SIGN IN</li>
            <li>LOCTION</li>
            <li>TEAM</li>
            <li>ABOUT</li>
        </ul>
    </div> <!-- wrapper end -->
</nav>

.wrapper {
max-width: 1120px;
margin: 0 auto;
}
nav {
  background-color: #F7FDFE;
}

nav ul li {
  display: inline-block;
  color: #45494D;
  float: right;
  padding: 10px; 
  font-size: 14px;
}
nav ul #logo {
  float: left;
  font-size: 30px;
}

【问题讨论】：

你到底期待什么......？
你能说明一下它应该是什么样子吗？
你能画出你需要的布局并发布吗？（可能在油漆中）

标签： html css vertical-alignment

【解决方案1】：

将padding:0 添加到nav ul #logo

.wrapper {
max-width: 1120px;
margin: 0 auto;
}
nav {
  background-color: #F7FDFE;
}

nav ul li {
  display: inline-block;
  color: #45494D;
  float: right;
  padding: 10px; 
  font-size: 14px;
}
nav ul #logo {
  float: left;
  font-size: 30px;
  padding:0;
}

<nav>
    <div class="wrapper ">

        <ul class="cf">
            <li id="logo">LOGO</li>

            <li>SIGN IN</li>
            <li>LOCTION</li>
            <li>TEAM</li>
            <li>ABOUT</li>
        </ul>
    </div> <!-- wrapper end -->
</nav>

【讨论】：

【解决方案2】：

将导航栏和徽标置于导航栏中心的简单方法是为导航栏设置一个高度，并为 li 赋予与 line-height 相同的值喜欢

nav {
 height: 70px;
}
ul.cf {
line-height: 70px;
}

【讨论】：