无法在小型设备中响应 div 中图像旁边的居中文本

Question

我在 div 中的某些文本旁边有一个 div 中的图像，并且我已将文本居中以在桌面上获得一些满意，但文本没有响应。当我将浏览器缩小到移动大小时，文本会叠加在响应式图像上。你可以在这里看到：https://www.artisanbelle.com/ 向下滚动到推荐信所在的区块，你就会明白我的意思了。

“pic-testimonial”类有多个 div。在我添加翻译/转换以使文本居中之前，我的文本块在移动设备中是响应式的，但它们没有居中。我需要一种方法，使我可以将文本集中在该 div 中，但又能保持整体结构的响应能力。我所拥有的并没有做到这一点，我不知道该怎么做。 “中心”标签不起作用。为了澄清，没有转换，文本位于大 div 的顶部（顺便说一下，div 的大小很好）。转换创建了我想要的效果，但仅限于桌面级别。如前所述，它在移动设备上很不稳定。有没有人有另一种方法可以在响应式 div 块中居中文本？

如果可能的话，我更喜欢在 HTML5 中不弃用的解决方案。谢谢。

我试过下面的代码：（只提供sn-p）

<div class="testimonial-container">

<div class="pic-testimonial">
  <div class="testimonial-imga"><figure class="photo1"><img class="testimonial-photo" src="http://www.artisanbelle.com/images/stories/amandac.jpg" alt="Amanda C"></figure> </div>
    <div class="testimonial-texta"><div class="test-text">      
     <p>"These white topaz earrings are gorgeous. The stones catch the light and are so pretty. They can be dressed up or down and the craftsmanship is top quality. A great pair of earrings that go with everything." <br>- Amanda Coldwell</p> </div> </div>
</div>

</div>

CSS：

.test-text {
    position: relative;
}

.test-text p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-16%, 80%);
  text-align: center;
}
.testimonial-imga, .testimonial-imgb {
    float: left;
}


.testimonial-texta, .testimonial-textb {
    float: left;
    padding: 15px;
`   background-color: #DDE1E4;
    width: 50%;
    text-align: center;
    font-size: 1.3em;
}

.testimonial-container {
    width: 80%;
    border: none;
    margin: auto;
}

预期/期望的输出：在所有设备上以响应方式居中的文本 实际输出：文本仅以正常浏览器大小在桌面设备上居中。当浏览器为移动设备大小时，文本叠加在图像上 图像很好，并且已经响应。

Answer 1

使用中心标签

.test-text {
  position: relative;
}

.test-text p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-16%, 80%);
  text-align: center;
}

<center>
  <div class="testimonial-container">
    <div class="pic-testimonial">
      <div class="testimonial-imga">
        <figure class="photo1"><img class="testimonial-photo" src="http://www.artisanbelle.com/images/stories/amandac.jpg" alt="Amanda C"></figure>
      </div>
      <div class="testimonial-texta">
        <div class="test-text">
          <p>"These white topaz earrings are gorgeous. The stones catch the light and are so pretty. They can be dressed up or down and the craftsmanship is top quality. A great pair of earrings that go with everything." <br>- Amanda Coldwell</p>
        </div>
      </div>
    </div>
  </div>
</center>

read more at

Answer 2

没关系。我解决了这个问题。我将文本转换移动到桌面部分（媒体查询），并将 .testimonial-texta、.testimonial-textb 宽度属性的宽度设为 100%。