css - 似乎无法让两个 div 彼此相邻

Question

我希望菜单图标保留在左侧，我的 Logo 位于中间，但我希望它们位于同一水平面上。

这是它现在的样子，也是我想要的样子:https://i.imgur.com/7KWs7R0.jpg

.topnav a.icon {
  margin-right: 0em;
  margin-top: 0em;
  text-align: left;
  float: left;
  display: block;
}

.mobile_logo {
  margin: auto;
  float: middle;
  display: block;
}

<a href="javascript:void(0);" class="icon" onclick="myFunction()">
  <img src="img/s_personal_logo_mobile.png" />
</a>
<div class="mobile_logo">
  <img class="mobile_logo" src="img/s_personal_logo_black.png" width="25%" height="25%" />
</div>

Answer 1

有了 flex，你得到的 css 更少了。我已经注释掉了菜单类中的对齐项。如果您希望它们垂直对齐，只需取消注释即可

.menu{
  display:flex;
  //align-items: center;
}
.menu a{
  flex: 0 0 50%;
}

<div class="menu">
  <a href="javascript:void(0);" onclick="myFunction()">
    <img src="img/s_personal_logo_mobile.png" />
  </a>
  <img src="img/s_personal_logo_black.png" height="60"/>
</div>