将按钮定位在img两侧的中间高度

Question

我有这个简单的HTML代码，其div包含一个img和2个按钮：

<div id="container">
    <img src="....">
    <button id="lefBTN"> .... </button>
    <button id="rightBTN"> .... </button>
</div>

谁能告诉我如何使用CSS将两个按钮分别定位在图像的左侧和右侧的两侧中间高度？

图像可以在垂直和水平方向上定向，但是两个按钮必须始终位于其两侧的一半高度，如图所示：

Answer 1

一种解决方案将使用内嵌渲染 + 绝对定位 里面...

内嵌渲染是“非贪婪的”，容器始终尝试使用最少的空间。

绝对定位将用于将按钮放置在您喜欢的任何位置，而具有相对位置的最接近的父级将作为参考。

另外，变换将很有帮助，因为它们始终使用自己元素的尺寸进行计算，因此您可以放心地使用-50%进行居中。我真的建议这样做，因为按钮的大小无关紧要。

我建议您对坐标和属性进行一些实验，以便更好地理解。

#container {
  display: inline-block;
  position: relative;
  margin: 10px;
}

img { 
  background: grey;
  width: 400px;
  height: 150px;
}

#lefBTN,
#rightBTN { 
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  background: darkblue; 
  color: white;
  border: 1px solid darkblue;
}

#lefBTN {
  left: -10px;
}

#rightBTN {
  right: -10px;
}  

<div id="container">
    <img src="..."/>
    <button id="lefBTN">lB</button>
    <button id="rightBTN">rB</button>
</div>