1

quiero que el texto quede en el centro debajo de la img de mi cara pero no lo que el texto quede como titulo de la img de mi cara

quiero que el texto quede en el centro debajo de la img de mi cara
pero no lo que el texto quede como titulo de la img de mi cara

HTML

<img id="Home" class="img-fluid">
<figure class="figure">
  <img id="foto" class="figure-img img-fluid top-50 start-50 translate-middle rounded-circle" src="img/foto.jpg">
  <figcaption class="figure-caption">safafaweraewfw</figcaption>
</figure>

CSS

#Home {
position: relative;
  background-image: url(img/fondo.jpg);
  background-size: cover;
  width: 1500px;
  height: 630px;
  border: 3px solid #73AD21;

 }

 #foto{
  position: absolute;
 }

quiero que el texto del <figcaption> se muestre como titulo de la <img> con id="foto" pero se muestra como titulo de la <img> con id="Home"

1 respuesta 1

0

Si cambias la imagen del fondo por un "div" y lo metes dentro del "figure", el texto te queda dentro. Y con flex-box te alineé la imagen y el texto en el centro.

    <div id="Home">
        <figure class="figure d-flex align-items-center justify-content- 
             center">
            <div>
                <img id="foto" class="figure-img img-fluid rounded- 
                    circle"
                    src="cara.jpg">
                <figcaption>Hello</figcaption>
            </div>
        </figure>
 </div>

Y el CSS

#Home {
position: relative;
  background-image: url(foto.jpg);
  background-size: cover;
  width: 100vw;
  height: 100vh;
  border: 3px solid #73AD21;
 }
figure{
    width: 100%;
    height: 100%;
  }
 #foto{
     height: 100px;
 }

Te saque la posicion absoluta de la imagen porque con flex-box es mejor en mi opinión, si copias esto debería funcionarte (sino, cambia el por un o algo asi, a mi me funciona)

2
  • Muchas gracias Tiziano anda perfecto. Algunos de estos dias tengo que revisar mejor la documentación de Bootstrap en las parte de posiciones. Para entenderlo mejor, muchas gracias genio y voy a seguir aprendiendo suerteeeeeeeee :) el 4 sep. 2022 a las 17:10
  • De nada capo! pone la pregunta como respondida, así no responde nadie más
    – Tiziano
    el 4 sep. 2022 a las 17:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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