图片上的文字 - 响应式

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

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

 <div id="box-search"> <div class="thumbnail"> <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>