html - 我需要帮助在图像上添加文本

Question

为什么这段代码没有让我的文字在图片中居中？我已经为此工作了一段时间，这快要让我发疯了。如此简单的事情会带来麻烦。

.header-txt {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 5em;
}

.header-wrapper {
    postion: relative;
}

.header-img {
    width: 100%;
    height: auto;
}

<div class="header-wrapper">
    <img class="header-img" src="http://science-all.com/images/wallpapers/website-background-images/website-background-images-20.png" alt="macbook">      
    <div class="header-txt">Hello</div>
</div>

Answer 1

一些非常简单的事情。首先，您需要忘记 top:50%。当您这样做时，div 将从顶部开始 50%，而不是从 50% 居中。所以你要做的是添加 top:0; 和 bottom:0;。然后你需要给你的 div 一个高度。我通常做的是，如果它不是动态高度 div，这意味着不会有很多文本，并且在响应式设计中调整大小时它将保持相同的高度，然后右键单击它并检查元素以查看多高然后你可以给它高度。所以你的 div 大约是 90 px 高，所以添加 90 px 的高度。然后将垂直边距设置为自动，这样 margin:auto 0; 然后它应该使绝对定位的 div 在相对定位的 div 中居中。所以你的 css 看起来像这样:

.header-txt {
  position:absolute;
  top:0;bottom:0;
  margin:auto 0;
  width:100%;
  height:90px;
  font-size:5em;
  text-align:center;
}
.header-wrapper {
  position:relative;
}
.header-img {
    width: 100%;
}

如果您要使用动态高度 div，则需要使用不同的技术。在此技术中，您将设置顶部和左侧百分比。大多数人现在都使用 css transform 属性来居中 div，这是一种非常方便的技术，现在有很好的浏览器支持。这是浏览器对这项技术的支持，现在大多数浏览器都支持它 Transform property broswer support .那么你的 css 将如下所示:

.header-txt {
  position:absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size:5em;
}
.header-wrapper {
  position:relative;
}
.header-img {
    width: 100%;
}

别担心上面评论中的那些白痴，我觉得你的问题是这个论坛的用途，一些经常访问该网站的人觉得自己有权利，因为他们知道一些你不知道的事情。我在这个网站上的很多问题中都看到了这一点，这真的让我发疯。您显然试图解决这个问题，只是对如何完成这个问题有一个小问题。

无论如何，希望这对您有所帮助。