图像上的文字 - 响应

Question

这是我的第一个问题......我必须这样做：

但我搜索了很多，没有什么对我有用，我在html和css中有这样的东西

.thumbnail {
    position: relative;
    margin-bottom: 0;
    border: 0;
    border-color: transparent;
}

.caption {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
}

  <div id="box-search">
      <div class="thumbnail text-center">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Granola03242006.JPG/280px-Granola03242006.JPG" alt="">
          <div class="caption">
              <p>contacto@windberg.cl</p>
              <p>+56983874071   |   +56228231294</p>
              <p>El Aguilucho 3174, Providencia, Región Metropolitana</p>
          </div>
      </div>
  </div>

有效，但当我使用chrome的响应模式时，文本会留下图像

（对不起我的英语，我说西班牙语）

Answer 1

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="floating-panel">
  <ul class="rss">
    <li id="list_0"><a href="javascript:void(0)">Diana</a></li>
    <li id="list_1"><a href="javascript:void(0)">Paul</a></li>
    <li id="list_2"><a href="javascript:void(0)">Robert</a></li>
  </ul>
</div>

＆＃13;

img {
    display: block;
}

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

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

＆＃13;

＆＃13;

＆＃13;