html - 内联 block 内的显示 block

Question

我有两张图片，一张在左边，第二张在右边。当我尝试在中间添加两个按钮时，右图位于底部，左图位于顶部，我无法解决这个问题。有人可以给我建议吗？元素不是那么大，它们可以很容易地排成一行。按钮应该一个下一个。有人可以给我建议吗？

HTML

<img src="/boh/boh/public/img/angel wing.jpg" class="wings" id="leftWing">
<button class="buttons">Login</button>
<button class="buttons">Register</button>
<img src="/boh/boh/public/img/devil wing.jpg" class="wings" id="rightWing">

CSS

#leftWing {
  margin-right: -4vw;
  display: inline-block;
}
#rightWing {
  margin-left: -4vw;
  display: inline-block;
}
.buttons {
  margin: 1.2vh 0;
  height: 2.4vh;
  width: 4.5vw;
  text-align: center;
  display: block;
}

Answer 1

您可以包装两个 button 元素，然后将父包装元素的 display 设置为 inline-block:

.button-wrapper,
.wings {
  display: inline-block;
}
.buttons {
  display: block;
  margin: 0.4em auto;
}

<img src="//placehold.it/200" class="wings" id="leftWing" />
<div class="button-wrapper">
  <button class="buttons">Login</button>
  <button class="buttons">Register</button>
</div>
<img src="//placehold.it/200" class="wings" id="rightWing" />