1

He intentado de todo pero siempre me queda así:

----------
l imagen1 l
---------- 
texto img1

----------
l imagen2 l
----------
texto img2 

En cambio lo que quiero es esto (centrado) con dos o más imágenes y el texto sobre las imágenes en un background-image:

---------- ----------
l imagen1 l l imagen2 
---------- ----------

No sé si me explico bien, pero la cuestión es ¿cómo lo hago?

He intentado:

.imga1 {
  background-image: url(http://cdn2.hubspot.net/hubfs/763617/images/img-left.png?t=1466090614807);
  padding: 5px 10px 5px 10px;
  margin: 2px;
  float: left;
  width: 200px;
  text-align: center;
}
<div>
  <center>
    <div class="imga1"></div>
    <div class="imga1"></div>
  </center>
</div>

4
  • 1
    Debes mostrar el código que has intentado, imagino que solo es cuestión de añadir la propiedad float:left o display:inline-block a los div pero es importante que muestres tu estructura el 4 dic. 2017 a las 15:57
  • Como puedes comprobar ejecutando el ejemplo de tu propio código sí que se colocan una a continuación de la otra. el 4 dic. 2017 a las 16:07
  • 2
    Se colocan una al lado de la otra, pero las quiere centradas. Para ello tan sólo tendría que quitar el float:left y poner el display:inline-block como le sugiere Camilo Vasquez
    – Alvaro Montoro
    el 4 dic. 2017 a las 16:10
  • Cierto. No lo había leído bien el 4 dic. 2017 a las 16:10

2 respuestas 2

2

Para acomodar tus elementos horizontalmente y que a su vez queden centrados en relación a su contenedor simplemente debes aplicarle la propiedad display: inline-block y al contenedor aplicarle text-align: center y listo.

#contenedor{
  text-align: center;
}

.imga1 {
  background-image: url(http://cdn2.hubspot.net/hubfs/763617/images/img-left.png?t=1466090614807);
  padding: 5px 10px 5px 10px;
  margin: 2px;
  display:inline-block;
  width: 200px;
  text-align: center;
}
<div id="contenedor">
  <center>
    <div class="imga1"></div>
    <div class="imga1"></div>
  </center>
</div>

1
#contenedor
  .img
  .texto

#contenedor {
  position: relative;
}
.img {
  height: 100px;
}
.texto {
  position: absolute;
  width: 100%;
  height: 100%;
}
2
  • 4
    Aunque esta respuesta pueda ser correcta, para que sea mas útil deberías explicar un poco mas porqué soluciona el problema del OP.
    – Pikoh
    el 4 dic. 2017 a las 17:16
  • Debes responder agregando una explicación a tu código por favor revisa Cómo responder.
    – Jorgesys
    el 5 dic. 2017 a las 1:15

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.