Расположите кнопки на средней высоте двух сторон изображения.

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>