CSS:如何将图像与另外两个垂直围绕第一个图像的图像包围

Question

我基本上只是想让主图片被两个较小的箭头包围。我在这里错过了什么？

.buttonsImage {
  background-image: url('http://celineburnand.com//img/menu/navigation_menu.png');
  background-repeat: no-repeat;
  background-size: 217px;
  display: block;
  float: left;
  height: 24px;
  vertical-align: text-center;
}
div#beforeBtn {
  background-position: -17px -41px;
  width: 21px;
}
div#afterBtn {
  background-position: -50px -40px;
  width: 21px;
}

<article style="overflow-y: scroll;" class="image-detail">
    <div id="beforeBtn" class="buttonsImage"></div>
    <img id="main-drawing" src="http://celineburnand.com/img/drawings/6.jpg" width="640" height="200" alt="" style="display: inline;">
    <div id="afterBtn" class="buttonsImage"></div>
    <p><span style="font-style:italic">Circuit</span>, charcoal on paper, 200 x 150 cm, 2014</p> 
</article>

https://jsfiddle.net/ubwr370L/

Answer 1

使用当前标记，使箭头div display: inline;并删除float: left;。然后将vertical-align: middle;应用于div和img。

https://jsfiddle.net/ubwr370L/1/

Answer 2

添加：

.image-detail {
   white-space: nowrap;
}

以避免在宽度不足时移动箭头。