Question

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

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

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

Answer 1

我删除了保证金左：-25％和保证金最高价：-25％并增加保证金：0自动;并修复了它

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

Updated fiddle:

Answer 2

我认为您需要使用transform: translate() 居中文本。顺便说一句，最好使用CSS Flexboxes - fiddle here：）

＆＃13;

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%);
}

＆＃13;

<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>

＆＃13;

Answer 3

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

如果你写上：50％而左：50％，文本div的左上角将是你的img的确切中心。

您只需将边距左边和边距顶部调整为文本大小（然后为边距写入文字宽度/ 2和文本高度/ 2）：）

在动态图像中居中文本

3 个答案: