如何在 100% 宽度的固定图像中将文本居中

Question

我有一张图片（草坪的图片），其样式如下：

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

我有一个 <h1> Putnam Lawn Care</h1> 想要重叠并在图像中居中，但不确定如何使用 css 执行此操作（我试过 position:fixed; top: 20%; left: 50%; 但这将 'Putnam Lawn Care' 的 'P' 置于 50%，所以这也不居中）？另外我不确定这里的固定定位是否正确，我应该使用绝对定位吗？在此先感谢您的帮助！

Answer 1

我希望这会奏效。这可以将 h1 标签放置在 100% 宽度内，并且文本将居中对齐。

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

既然你用了position:fixed作为图片，那么最好为<h1>使用固定位置also.This将有助于将<h1>始终贴在图片上。

Answer 2

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

Answer 3

这是一个动态图像大小和环绕元素。

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>

如何在 100% 宽度的固定图像中将文本居中

How to center text in 100% width fixed image

css

position

fixed

css-position

absolute