使文本在动态图像中居中

Centering text in Dynamic Image

本文关键字：中居 图像 动态 文本      更新时间：2023-09-26

我有一个动态的图像：100% 宽度和 100% 高度，无论大小如何，我如何将文本垂直和水平保持在中心？

https://jsfiddle.net/jzhang172/h9y8umr2/

html, body{
  margin:0px;
}
.wrapper{
position:relative;
}
img{
  height:100%;
  width:100%;
  position:relative;
}
.text-wrapper{
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-25%;
  margin-top:-25%;
}
<div class="wrapper">
<img src="http://www.wildlifetrusts.org/sites/default/files/images/Planting%20along%20realigned%20River%20Chelt%20Gloucs%20WT,%20EA%20and%20landowner2%20comp.jpg">
<div class="text-wrapper">
<h2>Sample Text</h2>
<p>Text Sample</p>
</div>
</div>

我认为您需要使用transform: translate()来居中文本。顺便说一下，最好使用 CSS 弹性框 - fiddle here :)

html, body{
  margin:0px;
}
.wrapper{
position:relative;
}
img{
  height:100%;
  width:100%;
  position:relative;
}
.text-wrapper{
  position:absolute;
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);
}
<div class="wrapper">
<img src="http://www.wildlifetrusts.org/sites/default/files/images/Planting%20along%20realigned%20River%20Chelt%20Gloucs%20WT,%20EA%20and%20landowner2%20comp.jpg">
<div class="text-wrapper">
<h2>Sample Text</h2>
<p>Text Sample</p>
</div>
</div>

我删除了左边距：-25%和顶部边距：-25%，并添加了边距：0自动;并修复了它

    .text-wrapper{
  position:absolute;
  top:50%;
  left:50%;
  margin: 0 auto;
  }

更新的小提琴：

我认为你唯一的问题是你的文本包装类。

如果你写 top：50% 和 left：50%，你的文本div 的左上角将是你的 img 的正中心。

您只需要将左边距和上边距调整为文本的大小（边距为文本的写入宽度/2和高度/2）:)

相关文章：