html - 当我调整网络浏览器大小时，我的文字从我的图像上移开？

Question

当我调整我的网络浏览器大小时，我的文字从我的图像上移开。我一直在 Google 上搜索答案，但我还没有找到明确的答案。

这是我的 fiddle https://jsfiddle.net/Mulk/tzupe2d5/10/#&togetherjs=Ek4Og9VFHK

这是我的代码:

<div class="container-fluid myclass">
<div class="row">
<div  class=" col-xs-12 col-sm-12 col-md-12 col-xl-12 ">
<img  class="img-responsive compimage" src="http://i1074.photobucket.com/albums/w407/Mulk_Abdulhadi/cop7_zpsqrstboer.jpg">

<div ><h2>Front-End Developer<p>ART/FUN/LIFE</p></h2></div>
</div>
</div>
</div>


CSS 
.myclass{
  padding-left: 0px;
  padding-right: 0px;
}

.compimage {
     max-width: 100vw;
   margin-left: 0px;
  background-size: cover;
  position: relative;

}

div h2{
  position: absolute;
 text-align: center;

  color: white;
font-family: 'Lato', sans-serif;
font-weight: 300;
  font-size: 55px;

}

Answer 1

我不确定你的意思，但这就是我所做的。如果您正在寻找不同的东西，请告诉我。

添加top: 50px;并将 <h2> 的宽度设置为 100%文本。

这是 fiddle https://jsfiddle.net/King_Code/hL6b4qxh/1/

div h2{
  width:100%;
  max-width: 1000px;
  position: absolute;
  text-align: center;
  float: right; 
  color: white;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 55px;
  line-height: 150%;
  top: 50px;
}

希望这对您有所帮助。