Question

我希望我的文字与我的图片（只有一点）中心重叠。我正在尝试像top: -50%这样的事情，但是没有用。我无法控制图像的高度。

我使用两个相对定位，因为有一个接一个，并使用相对我可以控制它们之间的间距。

CSS

  .article-txt {
    position: relative;
    z-index:1;
    font-size:35px;
    font-weight:bold;
    padding: 0 50px;
   }

   .article-img {
     display: block;
     position: relative;
     margin-top:50px;
     margin-bottom:-50px; /* overlap image */
     z-index:0;
    }

HTML

<div id="article-txt"></div>
<div id="article-img"></div>

Answer 1

我可以从您的查询中了解到您希望实现此目标

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
  z-index:1;
}

.overlay {
  position: relative;
  top:-100px;
  height: 100%;
  width: 100%;
  opacity: 1;
  z-index:9;
  

 
}


.text {
  color: red;
  font-size: 20px;
  
}

<div class="container">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSt06aInHbKL6NwLIP-Kx90M-QjhLcnxEDe8LaehoDz7zuqBNFBHg" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

使用百分比而不是px将文本居中于图像

1 个答案: