Question

我无法垂直对齐列表中的链接和徽标，知道我能解决什么问题吗？这是codepen中的代码。 How to completely uninstall Android Studio?

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

Answer 1

将padding:0添加到nav ul #logo

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

将导航栏和徽标置于导航栏中心的简单方法是将高度设置为导航栏，并为行高提供相同的值喜欢

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

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

2 个答案: