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

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 的高度。然后将垂直边距设置为 auto 所以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%;
}

不要担心上面那些 cmets 中的白痴我觉得你的问题是这个论坛的目的，并且一些经常访问该网站的人觉得有权利只是因为他们知道一些你不知道的东西。我在这个网站上提出的很多问题中都看到了这一点，这真的让我抓狂。你显然试图弄清楚这一点，只是对如何完成这个有一个小问题。

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