Hola, quiero agregar texto sobre una imagen en su centro inferior. Es un proyecto de galería de fotos, por lo que todas las imágenes son de diferentes dimensiones. Css necesita trabajar con los porcentajes para que funcione en imágenes de todos los tamaños

<div class="images">
   <img src="dummy.jpeg">
   <p>Some text to appear>
</div>

Intenté leer muchas preguntas sobre stackoverflow pero todas funcionan para una imagen. Tengo varias imágenes con diferentes dimensiones.

Quiero poner el texto en el centro inferior de la imagen y una franja negra que tenga un ancho del 100% sobre la imagen. Podría ser el fondo del texto.

1
Hamza_Ali 25 dic. 2016 a las 16:07

3 respuestas

La mejor respuesta

Utilice el posicionamiento absoluto en el título <p>
Haz el contenedor inline-block
Fiddle: jsfiddle.net/eohtwd1u

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

.images p {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 0;
  left: 0;
}
<div class="images">
   <img src="https://placehold.it/350x150">
   <p>Some text to appear</p>
</div>
1
pol 25 dic. 2016 a las 13:24
<!-- comment to fool the edit limiter -->

img{
  width:500px;
  height:200px;
  }
.images{
  width:500px;
  height:200px;
  align-items:center;
  position:relative;
  
  }
p{
  position:absolute;
  bottom:0;
  color:yellow;
  left:50%;
  }
span{
  position: relative;
  left: -50%;
  }
<div class="images">
   <img src="https://i.stack.imgur.com/wwy2w.jpg">
   <p><span>Some text to appear></span></p>
</div>
0
Brendonwbrown 9 mar. 2018 a las 05:35

Puede usar CSS Flexbox . Y para el texto en la parte inferior de cada imagen, use position: absolute y haga que su padre position: relative.

Echa un vistazo al fragmento a continuación:

.images {
  display: flex;
  padding: 5px;
}
.img-holder {
  position: relative;
  margin: 5px;
  align-self: flex-start;
}
.img-holder p {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  margin: 0;
}
<div class="images">
  <div class="img-holder">
    <img src="http://placehold.it/100x100">
    <p>Some text</p>
  </div>
  <div class="img-holder">
    <img src="http://placehold.it/120x120">
    <p>Some text</p>
  </div>
  <div class="img-holder">
    <img src="http://placehold.it/150x150">
    <p>Some text</p>
  </div>
</div>

¡Espero que esto ayude!

0
Saurav Rastogi 25 dic. 2016 a las 13:28