Question

我希望菜单图标留在左侧，徽标在中间，但我希望它们在同一水平线上。

这是现在的样子，也是我希望的样子：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

.mobile_logo {
  margin: auto;
}

.menu {
  width: 100%;
  display: flex;
}

<div class="menu">
  <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="100%" height="25%" />
  </div>
</div>

Answer 2

使用flex可以获得更少的CSS。我已经注释掉菜单类中的align-items。如果您希望它们垂直对齐，请取消注释

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

Answer 3

与旧版浏览器兼容的非Flexbox解决方案：

#img{
width:50%;
display:inline-block;

/*Optional: remove gap between images*/
margin-right:-5px;
}

<img src="https://i.postimg.cc/h4x1WB2P/0002.jpg" id="img">

<img src="https://i.postimg.cc/h4x1WB2P/0002.jpg" id="img">

Answer 4

CSS

.menu{
  margin-right: 0em;
  margin-top: 0em;
  text-align: left;
  display: flex;
  /*this area needs a set width */
  width: /* set the width */;
}
.menubutton{
  /*this area needs a set width*/
  width: /*set width */;
}

.mobile_logo {

}

将项目放入容器中以添加display:flex;。我删除了“ logo.png”上的设置宽度，以使其与.menu容器的高度成比例。

HTML

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

似乎无法将两个div彼此相邻

4 个答案: