垂直对齐 div 中的 a，高度未知 css

Question

当我添加徽标并且我的 a 浮动到导航栏的顶部时，使我的网站的导航栏出现问题

我试过像这样使用 flexbox display:flex; align-items:center; 在 topnav class 但 a 一直向左移动并带有徽标

我想要的结果是 a 在左边并且垂直居中

.logo {
  margin: 7px;
  margin-left:21px;
  cursor: pointer;
  width: 70px;
  height:auto;
}

.topnav {
  border: 1px solid red;
  color:black;
  background-color:white;
  overflow: hidden;
}

.topnav a {
  margin: 7px;
  padding: 70px 0;
  float: right;
  display: block;
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

<div class="topnav" id="myTopnav">
  <img href="Sindex.php" class="logo" src="Logo.png" alt="logo">
  <a href="#contact">Sign-in/up</a>
  <a href="#news">Order</a>
  <a href="#home" class="active">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

Answer 1

尝试将您的 <a> 包裹在 div

中

然后添加到您的顶部导航 class:

display: flex;
justify-content: space-between;
align-items: center;

应该可以。

垂直对齐 div 中的 a，高度未知 css

Vertically Aligning a's in div with unknown height css

html

css

flexbox