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

Question

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

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

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

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

标签： htmlcssimagebutton

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>