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

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

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

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

1 个答案: