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

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 像素高，所以添加 90 像素的高度。然后将垂直边距设置为自动 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 转换属性使 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%;
}

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

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

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

I need help adding text on top of an image

html

css

portfolio