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

【问题标题】：How to center text in 100% width fixed image如何在 100% 宽度的固定图像中居中文本
【发布时间】：2018-11-29 02:28:30
【问题描述】：

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

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

我有一个 <h1> Putnam Lawn Care</h1>，我想重叠并在图像中居中，但我不确定如何使用 css 来做到这一点（我尝试过 position:fixed; top: 20%; left: 50%; 但这会将“Putnam Lawn”的“P”关心' 50% 所以这也不是居中的）？另外我不确定固定定位在这里是否正确，我应该使用绝对定位吗？提前感谢您的帮助！

【问题讨论】：

标签： css position css-position fixed absolute

【解决方案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>

【讨论】：

【解决方案2】：

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

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

由于您使用position:fixed 作为图像，因此最好将<h1> 也使用固定位置。这将有助于将<h1> 始终与图像保持一致。

【讨论】：

图片好像覆盖了h1文字？
使用 z-index，如果您为应用了 z-index，则为
应用更大的值。其他明智的 z-index:1 就足够了
这成功了！非常感谢您的快速回复，h1 100% 宽度是一个非常聪明的解决方案
干杯@user9708733！

【解决方案3】：

为什么不把img和h1标签都放在一个封闭的div中，然后在那个div上做绝对定位——这将更易于维护，因为你不必设置position: absolute在多个元素上

【讨论】：

应用更大的值。其他明智的 z-index:1 就足够了