es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Bootstrap 5 El texto no puede estar centrado.

28 Jul, 2023 Programación

Tengo que hacer una página web para la escuela, pero por alguna razón no puedo centrar el texto.
Quiero que el texto esté en el medio de la imagen de fondo. He intentado de todo pero no puedo lograr que funcione.
Aquí está mi HTML: pastebin.com/0tTLKH5u
Y aquí está mi CSS: pastebin.com/Nzy33fWe

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para centrar el texto en la imagen de fondo, puedes usar la propiedad CSS background-position.

    Primero, modifica tu HTML para envolver el texto dentro de un elemento div:

    <body>
  <div class="container">
    <div class="centered-text">
      <h1>Bienvenido a Mi Sitio Web de la Escuela</h1>
    </div>
  </div>
</body>

    Luego, en tu CSS, agrega las siguientes propiedades a la clase .container:

    .container {
  background: url(images/school.jpg) no-repeat center center fixed;
  background-size: cover;
  /* agrega las siguientes propiedades para centrar el texto */
  display: flex;
  justify-content: center;
  align-items: center;
}

    Esto hará que el .container sea un contenedor flex, lo que le permite centrar sus elementos secundarios tanto horizontal como verticalmente. La propiedad justify-content: center centra los elementos secundarios a lo largo del eje horizontal (en este caso, el div .centered-text), mientras que align-items: center centra los elementos secundarios a lo largo del eje vertical.

    También asegúrate de ajustar el CSS para la clase .centered-text. Elimina las propiedades position: absolute; y top: 50%; y agrega la propiedad text-align: center;, como se muestra a continuación:

    .centered-text {
  /* elimina estas propiedades */
  /* position: absolute; */
  /* top: 50%; */

  /* agrega esta propiedad */
  text-align: center;
}

    Esto centrará el texto dentro del div .centered-text.

    Tu CSS modificado debería lucir así:

    .container {
  background: url(images/school.jpg) no-repeat center center fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.centered-text {
  text-align: center;
  color: #fff;
  font-size: 72px;
  text-shadow: 2px 2px #000;
}

    Guarda los cambios en tus archivos HTML y CSS y vuelve a cargar la página web. El texto ahora debería estar centrado en la imagen de fondo.

Comments are closed.