Text over image - responsive
51,133
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>
Author by
Admin
Updated on November 20, 2020Comments
-
Admin over 3 years
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
.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
(sorry for my english, i speak spanish)
-
hungerstar about 7 yearsActually, I think it's the fact the
img
is still usingdisplay: inline;
and the descender height creates that discrepancy. Sincep
has equal top and bottom margins it should vertically center appropriately. Nice catch on it being a little bit off though! -
Asons about 7 yearsYes, that it was, my bad
-
Tạ Anh Tú almost 2 yearsThis solution will not work if you set image width = 100%