如何使用reponsive将文本放在图像中心

Question

下面我附上了图片。

它有两个图像：
1）用户个人资料图片

2）记分板（用户图像下方）

名称和位置应放在中心的记分牌上，应该是响应式的。 你能帮我解决这个问题吗？

有些我怎么看起来像这样 附上下面的图片和代码

.bdgframe { position: relative; margin-top: -40px; align-items: center; } .bdgprofile { width: 50%; } –

     <div class="col-xs-6 col-sm-6 col-md-3" align="center">
    <img src="images4/pic_usr.png" class="img-responsive bdgprofile" />
    <img src="images4/frame.png" class="img-responsive bdgframe" />            
    <div>
    <p>ANKUR</p>
    <p>PARIS</p>
    </div>
    </div>

附上小提琴：https://jsfiddle.net/prabashanash/ggu91yjc/4/#&togetherjs=ifPxlavLH7

你们可以帮我解决这个问题....

Answer 1

• 假设1＆amp; 2是相同尺寸的图像
• 假设2是.png图像

然后，（使用jquery）

jQuery('.image').each(function() {
  $(this).prepend('<img src="https://static1.squarespace.com/static/582e4337414fb5594a0cc385/58d6e32a8419c267b72d85f6/58d6e34ee6f2e12e70fb01a8/1491412293831/SexualHealth.png?format=300w" class="png-over" />')

});

.image {
  position: relative
}

.png-over {
  position: absolute;
  top: 0;
  left: 0
}

img {
  display: block;
}

.image {
  position: relative;
  display: inline-block;
}

.text {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate( -50%, -50%);
  text-align: center;
  color: black;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image">

  <img src="http://via.placeholder.com/310x310" />
  <div class="text">
    <p>ANKUR</p>
    <p>PARIS</p>
  </div>

</div>

Answer 2

试试这个

根据您的要求更改bottom : %值

＆＃13;

＆＃13;

 .bdgframe, .text {position:absolute; bottom:30%;margin:auto;left:0;right:0;}
 
 .bdgprofile { width: 50%;position:relative;}
 .text{bottom:18%;}
 

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="col-xs-6 col-sm-6 col-md-3" align="center">
<img src="https://dummyimage.com/200x300/wheat/wheat" class="img-responsive bdgprofile" />
<img src="https://dummyimage.com/200x30/fff/fff" class="img-responsive bdgframe" />            
<div class="text">
<p>ANKUR</p>
<p>PARIS</p>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我认为这就是你要找的东西

<style type="text/css">

.position{
  position:relative;
  left: 50%;
  transform: translate( -50%, 0%);
  text-align: center;

}
.fixed-text {
  position: absolute;
  top: 83%;
  left: 50%;
  transform: translate( -50%, -50%);
  text-align: center;
    color: #000;
    z-index: 999;
    font-weight: 600;
    font-size: 19px;
    line-height: 10px;
}
.location{
    color: #fff;
    font-size: 15px;

}
</style>

<div class="col-xs-6 col-sm-6 col-md-3 position">
<img src="https://i.stack.imgur.com/5Sqhz.png" />           
<div class="fixed-text">
<p>ANKUR</p>
<p class="location">PARIS</p>
</div>
</div>