使用CSS在导航栏内部居中文本

Question

因此，如果我要使用此代码，它会做的是文本实际上不会在导航栏内居中，因为图像。使用CSS，我如何使文本与我的徽标在同一行？ （您可能需要在代码段中执行完整页面）

＆＃13;

＆＃13;

.mainav {
    position: fixed;
    top: 0;
    z-index: 3;
    width: 100%;
}
.mainav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ffffff;
}

.mainav li {
	float: left;
    border-right: 1px solid #bbb;
}

.mainav li:last-child {
    border-right: none;
}

.mainav li a {
    height:35px;
    top: 20px;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

＆＃13;

<div class="mainav">
<ul>
  <li><a href="/"><img src="https://4424club.xyz.412quack.com/assets/images/logo.png" alt="Project Club Logo"></a></li>
  <li><a href="/en/about">About</a></li>
  <li><a href="/en/contact">Contact Us</a></li>
  <li><a href="/en/pricing">Pricing</a></li>
  <li><a href="/en/support">Support</a></li>
  <li><a href="/en/login">Login</a></li>
  <li><a href="/en/signup">Signup</a></li>
</ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果你想要达到的目的是将文字垂直对齐，你可以这样做：

只有当它是一行时才有效：

.mainav li a {
    height:35px;
    top: 20px;
    display: block;
    color: black;
    text-align: center;
    padding: 0 16px;
    text-decoration: none;
    line-height: 35px;
}

将line-height属性设置为相同的高度并删除填充（注意：您应该保持左右padding - 或margin - 以留出一些空间）。

＆＃13;

＆＃13;

.mainav {
    position: fixed;
    top: 0;
    z-index: 3;
    width: 100%;
}
.mainav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ffffff;
}

.mainav li {
	float: left;
    border-right: 1px solid #bbb;
}

.mainav li:last-child {
    border-right: none;
}

.mainav li a {
    height:35px;
    top: 20px;
    display: block;
    color: black;
    text-align: center;
    padding: 0 16px;
    text-decoration: none;
    line-height: 35px;
}

＆＃13;

<div class="mainav">
<ul>
  <li><a href="/"><img src="https://4424club.xyz.412quack.com/assets/images/logo.png" alt="Project Club Logo"></a></li>
  <li><a href="/en/about">About</a></li>
  <li><a href="/en/contact">Contact Us</a></li>
  <li><a href="/en/pricing">Pricing</a></li>
  <li><a href="/en/support">Support</a></li>
  <li><a href="/en/login">Login</a></li>
  <li><a href="/en/signup">Signup</a></li>
</ul>
</div>

＆＃13;

＆＃13;

＆＃13;