15

this is my first question soo... i have to do someting like this:

enter image description here

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>contacto@windberg.cl</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
  • 21,206
  • 6
  • 50
  • 59
Javier Gonzalez
  • 153
  • 1
  • 1
  • 4

1 Answers1

40

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>
hungerstar
  • 21,206
  • 6
  • 50
  • 59
  • 1
    Actually, I think it's the fact the `img` is still using `display: inline;` and the descender height creates that discrepancy. Since `p` has equal top and bottom margins it should vertically center appropriately. Nice catch on it being a little bit off though! – hungerstar Apr 10 '17 at 22:25
  • Yes, that it was, my bad – Asons Apr 10 '17 at 23:04
  • This solution will not work if you set image width = 100% – Tạ Anh Tú Jun 19 '22 at 16:17
  • @TạAnhTú, please provide an example. I just set `width: 100%` to the `img` element and it still works. – hungerstar Jul 26 '22 at 14:33