使用 CSS 在另一个容器中居中绝对容器

Posted 2023-03-29

【中文标题】使用 CSS 在另一个容器中居中绝对容器

【英文标题】：Center absolute container inside another container with CSS

【发布时间】：2020-02-26 08:33:13

【问题描述】：

其实我有这个（这个截图来自其他html，我不需要居中图像）

我需要这样的东西

但我无法将播放按钮和 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" >
        </a>
    </div>
    <img id="imagenPeli" src="https://puu.sh/EwFra/20b0f2b018.png" class="img-fluid" >
</div>

【问题讨论】：

在 sn-p 中，它与 <img> 内的文本和按钮一起运行。这是预期的输出，对吧？

【参考方案1】：

要将 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" >
        </a>
    </div>
    <img id="imagenPeli" src="https://puu.sh/EwFra/20b0f2b018.png" class="img-fluid" >
</div>