内联块内部的显示块

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" />

​