Question

我的图片（草坪图片）具有以下样式：

img{
    width: 100%;
    height: 40%;
    position: fixed; <!-- top of page-->
}

我有一个<h1> Putnam Lawn Care</h1>，我想重叠并在图像中居中，但是不确定如何使用CSS做到这一点（我尝试过position:fixed; top: 20%; left: 50%;，但这将'P' 50％的“ Putnam草坪护理”的数量，因此也不居中）另外，我不确定此处的固定定位是否正确，我应该使用绝对值吗？预先感谢您的帮助！

Answer 1

这里具有动态图像尺寸和包装元素。

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: block;
  margin: 0;
}
.wrap {
  position: relative;
  float: left;
}

<div class="wrap">
  <h1>Loreum!</h1>
  <img src="https://picsum.photos/300/200" alt="Loreum Pics">
</div>

Answer 2

我希望这会起作用。这样可以将h1标签设置为100％的宽度，并且其中的文本将居中对齐。

h1{
    position:fixed; 
    top: 20%;
    width:100%;
    text align: center;
}

由于对图像使用了position:fixed，因此最好对<h1>使用固定位置。这将有助于将<h1>始终粘贴在图像上。

Answer 3

为什么不只将img和h1标记都放在一个封闭的div中，然后在该div上进行绝对定位-这将更易于维护，因为您不必在多个元素上设置position: absolute

如何在100％宽度的固定图像中居中放置文本

3 个答案: