html - 将按钮放置在图像两侧的中间高度

Question

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

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