Центрировать абсолютный контейнер внутри другого контейнера с помощью CSS - PullRequest
Новая
       45

Центрировать абсолютный контейнер внутри другого контейнера с помощью CSS

0 голосов
/ 31 октября 2019

На самом деле у меня есть это (этот скриншот из другого HTML, где мне не нужно центрировать изображение)

Actually i have this (i need to center the image)

И мне нужно что-то вроде этого

And i need something like this (this screenshot is from another html where i don't need to center the image)

но я не могу расположить кнопку воспроизведения и h3 текст "внутри" изображения ... я надеюсь, что вы можете помочь мне 

.imgContainer {
  width: 100%;
  height: auto;
}

.imgContainer .botonPlay {
  position: absolute;
  display: block;
}

.imgContainer .botonPlay img {
  margin-left: 10px;
  width: 70px;
  height: 65px;
}

.imgContainer h3 {
  position: relative;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 50px;
  color: #FFFFFF;
  text-shadow: 3px 1px 0px #000000;
  top: 0px;
  padding-left: 10px;
}

.imgContainer #imagenPeli {
  display: block;
  margin: auto;
}
    <div class="imgContainer">
    <div class="botonPlay">
        <a href="ver.html">
            <h3>JOKER</h3>
            <img src="https://puu.sh/EwYad/148efdef71.png" alt="">
        </a>
    </div>
    <img id="imagenPeli" src="https://puu.sh/EwFra/20b0f2b018.png" class="img-fluid" alt="...">
</div>

1 Ответ

0 голосов
/ 31 октября 2019

Чтобы расположить кнопки h3 и paly в центре изображения, вы можете использовать следующую CSS: 

.imgContainer {
    width: fit-content;
    height: auto;
    position: relative;
}

.imgContainer .botonPlay {
	position: absolute;
    display: flex;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: center;
}

.imgContainer .botonPlay img {
    margin: 0 auto;
    width: 70px;
    height: 65px;
    display: block;
}

.imgContainer h3 {
  position: relative;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 50px;
  color: #FFFFFF;
  text-shadow: 3px 1px 0px #000000;
  top: 0px;
  padding-left: 10px;
}

.imgContainer #imagenPeli {
  display: block;
  margin: auto;
  width: 100%;
}
<div class="imgContainer">
    <div class="botonPlay">
        <a href="ver.html">
            <h3>JOKER</h3>
            <img src="https://puu.sh/EwYad/148efdef71.png" alt="">
        </a>
    </div>
    <img id="imagenPeli" src="https://puu.sh/EwFra/20b0f2b018.png" class="img-fluid" alt="...">
</div>
...