2

Tengo unas imágenes en un slider con texto pero no consigo centrarlo. Me quedan de la siguiente forma: introducir la descripción de la imagen aquí

El código de las imágenes es este:

<div class="mySlides">
    <div class="container">
      <a title="Dobles Títulos Internacionales" href="http://www.etsit.upm.es/internacional/dobles-titulos-internacionales.html">
        <img src="https://www.bennett.edu.in/wp-content/uploads/2017/06/engineering-1024x371.jpg" width="900px" height="150">
      </a>
      <div class="centered"><b>DOBLES TÍTULOS INTERNACIONALES</b></div>
    </div>
  </div>

Y por otro lado el código css de centered es:

.centered {
  position: absolute;
  top: 80%;
  display: inline-block;
  color: #fc8e04;
  background-color: #fff;
  font-size: 18px;  
}

También he probado con justify-content: center; y no lo he conseguidi. ¿Alguien sabría decirme cómo puedo conseguir que ese texto aparezca centrado encima de la imagen?


Al probar las líneas de código dadas por @carlos-duarte me sale el texto de la siguiente forma: introducir la descripción de la imagen aquí

1
  • @BetaM tan solo horizontal, quiero que esté en la parte inferior de la imagen pero centrado
    – Maititis
    Commented el 24 jun. 2020 a las 1:38

2 respuestas 2

2

Prueba establecer el contenedor en position relative

.mySlides{
position: relative;
}

y el texto con la clase

.centered{
position: absolute;
z-index: 999;
}

intentalo y trata de alinear el texto a ver si te funciona correctamente.

0
2

Cambiar el posicionamiento del div que contiene al texto parece ser la opción mas simple.

Basándonos en la doc. de Mozilla Developer lo que haremos será cambiar su naturaleza de position: static; a un posicionamiento relativo.

Para no duplicar información, te recomiendo leas esta publicación de la misma comunidad (y que no es mia) donde se explica el tema de posicionamiento

    <style>
      .centered {
        position: relative;
        bottom: 20px;
      }
    </style>
    <div class="mySlides">
        <div class="container">
          <a title="Dobles Títulos Internacionales" href="http://www.etsit.upm.es/internacional/dobles-titulos-internacionales.html">
            <img src="https://www.bennett.edu.in/wp-content/uploads/2017/06/engineering-1024x371.jpg" width="900px" height="150">
          </a>
          <div class="centered"><b>DOBLES TÍTULOS INTERNACIONALES</b></div>
        </div>
    </div>

En este punto lo único que debes hacer para mover a voluntad el texto es aplicar alguna medida a:

  • top
  • bottom
  • left
  • right

Tu Respuesta

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

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