Html 图片上的文字 - 响应式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43333495/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 14:34:12 来源:igfitidea点击:
Text over image - responsive
提问by Javier Gonzalez
this is my first question soo... i have to do someting like this:
这是我的第一个问题……我必须这样做：
but i search a lot and nothing work for me, i had something like this in my html and css
但我搜索了很多，但对我没有任何作用，我的 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>[email protected]</p>
<p>+56983874071 | +56228231294</p>
<p>El Aguilucho 3174, Providencia, Región Metropolitana</p>
</div>
</div>
</div>that work, but when i use the responsive mode from chrome, the text leave the image
那行得通，但是当我使用 chrome 的响应模式时，文本会离开图像
(sorry for my english, i speak spanish)
（对不起我的英语，我说西班牙语）
回答by hungerstar
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>[email protected]</p>
<p>+56983874071 | +56228231294</p>
<p>El Aguilucho 3174, Providencia, Región Metropolitana</p>
</div>
</div>
</div>