3

Tengo una imagen (sliders) y dos div con textos dentro superpuestos a la misma (img), todo esto esta dentro de otro div el cual necesito que quede centrado verticalmente.

Intente con place-content, justify-content y align-content, pero por alguna razón que desconozco no funciona. Anteriormente también probé con display-grid, pero tampoco funcionó. ¿Alguna solución?

Mi objetivo es que quede centrado y adaptado para todos los dispositivos sin Frameworks. Comparto el código para que lo entiendan mejor ya que es un poco complicado de explicar.

.info {
  display: flex;
  flex-direction: row;
  position: relative;
  top: 150px;
  font-size: 25px;
}

.ul-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  height: auto;
  position: relative;
  right: 50px;
  padding: 0;
}

.ul-form li {
  font-size: 17px;
  color: #16c1b9;
}

.ul-form li span {
  color: #fff;
}

.años {
  text-decoration: none;
  list-style: none;
}

.titulo1 {
  max-width: 500px;
  background-color: #2a2929;
  padding-left: 80px;
  padding-top: 5px;
  padding-bottom: 7px;
  border-radius: 5px;
  box-shadow: 5px 5px 10px #111111;
  border-right: 3px solid #16c1b9;
  border-bottom: 1px solid #16c1b9;
}

.titulo2 {
  max-width: 500px;
  background-color: #2a2929;
  padding-left: 80px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
  box-shadow: 5px 5px 10px #111111;
  border-right: 3px solid #16c1b9;
  border-bottom: 1px solid #16c1b9;
}

.tmñ-sliders {
  width: 1000px;
  height: 100%;
  z-index: 2;
  padding-top: 10px;
  margin: 0;
}
<div class="info">
  <div class="tmñ-sliders">
    <div class="sliders">
      <ul>
        <li><img src="slider1.jpg" alt="Diploma"></li>
        <li><img src="slider2.jpg" alt="Universidad del Norte de Texas"></li>
        <li><img src="slider3.jpg" alt="Universidad Mercer de Macon"></li>
      </ul>
    </div>
  </div>
  <ul class="ul-form">
    <div class="titulo1">
      <li class="años"><span>2000-2005</span></li>
      <li><u>Título oficial</u>: <span> Doctorado de Historia.</span></li>
      <li><u>Lugar de estudio</u>: <span> Universidad del Norte de Texas, Denton.</span></li>
    </div>
    <div class="titulo2">
      <li class="años"><span>2015-2019</span></li>
      <li><u>Título oficial</u>: <span> Licenciado en Ciencias de la Computación.</span></li>
      <li><u>Lugar de estudio</u>: <span> Universidad Mercer de Macon, Georgia.</span></li>
    </div>
  </ul>
</div>

8
  • Buen día, necesitas que las imágenes de la izquierda esté arriba del texto y todo centrado? En pocas palabras, que todo esté vertical en dispositivos pequeños... Commented el 16 feb. 2023 a las 16:07
  • Creo que usar ñ en nombres de clases da problemas, puedes probar removiendolas y luego intentando modificar las propiedades?
    – AugustoM
    Commented el 16 feb. 2023 a las 16:09
  • Hola @Cris223511.dev necesito que tanto las imágenes como el texto queden centrados en la página. Las imágenes ya logre que quedaran arriba del texto y para dispositivos pequeños lo hice en vertical como me comentaste. Ahora lo estoy adaptando para dispositivos mas grandes y por alguna razón el div llamado .info no logro centrarlo en la pagina.
    – MayD
    Commented el 16 feb. 2023 a las 16:25
  • 1
    Hola @AugustoM ya hice ese arreglo y sigue sin poder centrarse, desde ya aprecio y agradezco tu respuesta.
    – MayD
    Commented el 16 feb. 2023 a las 16:27
  • Lo que quieres que este centrado verticalmente es este codigo ?: <div class="titulo1"> <li class="años"><span>2000-2005</span></li> <li><u>Título oficial</u>: <span> Doctorado de Historia.</span></li> <li><u>Lugar de estudio</u>: <span> Universidad del Norte de Texas, Denton.</span></li> </div>
    – AugustoM
    Commented el 16 feb. 2023 a las 16:37

2 respuestas 2

0

A la clase info deberías agregarle la propiedad space-evenly para indicar que el contenido flexible de adentro (tmn-sliders y ul-form) van a ocupar todo el ancho de info y a su vez estarán en el centro de info, que es el contenedor padre, recuerda:

.info {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  position: relative;
  top: 150px;
  font-size: 25px;
}

También, otro detalle que me percaté es que le estás dando un ancho fijo a tmn-sliders. Piensa en los casos de los dispositivos con pantallas más pequeñas u ordenadores con otra resolución, el ancho del contenedor siempre va a permanecer siendo el mismo, dejando un espacio flotando afuera. Tendrías que quitar su ancho, y también hice una pequeña separación de 20px a la derecha para que las imágenes no estén encima del contenedor de la derecha:

.tmn-sliders {
  height: 100%;
  z-index: 2;
  padding-top: 10px;
  margin: 0;
  margin-right: 20px;
}

Código completo:

.info {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  position: relative;
  top: 150px;
  font-size: 25px;
}

.ul-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  height: auto;
  position: relative;
  right: 10px;
  padding: 0;
}

.ul-form li {
  font-size: 17px;
  color: #16c1b9;
}

.ul-form li span {
  color: #fff;
}

.anios {
  text-decoration: none;
  list-style: none;
}

.titulo1 {
  max-width: 500px;
  background-color: #2a2929;
  padding-left: 80px;
  padding-top: 5px;
  padding-bottom: 7px;
  border-radius: 5px;
  box-shadow: 5px 5px 10px #111111;
  border-right: 3px solid #16c1b9;
  border-bottom: 1px solid #16c1b9;
}

.titulo2 {
  max-width: 500px;
  background-color: #2a2929;
  padding-left: 80px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
  box-shadow: 5px 5px 10px #111111;
  border-right: 3px solid #16c1b9;
  border-bottom: 1px solid #16c1b9;
}

.tmn-sliders {
  height: 100%;
  z-index: 2;
  padding-top: 10px;
  margin: 0;
  margin-right: 20px;
}
<div class="info">
  <div class="tmn-sliders">
    <ul>
      <li><img src="https://i.imgur.com/wBWzOZo.png" width="100px" alt="Diploma"></li>
      <li><img src="https://i.imgur.com/wBWzOZo.png" width="100px" alt="Universidad del Norte de Texas"></li>
      <li><img src="https://i.imgur.com/wBWzOZo.png" width="100px" alt="Universidad Mercer de Macon"></li>
    </ul>
  </div>
  <di class="ul-form">
    <div class="titulo1">
      <li class="anios"><span>2000-2005</span></li>
      <li><u>Título oficial</u>: <span> Doctorado de Historia.</span></li>
      <li><u>Lugar de estudio</u>: <span> Universidad del Norte de Texas, Denton.</span></li>
    </div>
    <div class="titulo2">
      <li class="anios"><span>2015-2019</span></li>
      <li><u>Título oficial</u>: <span> Licenciado en Ciencias de la Computación.</span></li>
      <li><u>Lugar de estudio</u>: <span> Universidad Mercer de Macon, Georgia.</span></li>
    </div>
  </di>
</div>

Puedes ver mejor los resultados en este enlace (agregué una regla @media como un ejemplo de como se vería en dispositivos pequeños, esto lo puedes personalizar a tu gusto).

1
  • 1
    Muchas gracias @Cris223511.dev, me solucionaste gran parte del problema, algunas cosas no quedaban como quería, pero luego jugué un poco con el código y logre conseguir lo que necesitaba. AugustoM (no me deja etiquetarte) tmb te agradezco mucho la ayuda, saludos!! y que tengan un buen día amboss!!
    – MayD
    Commented el 16 feb. 2023 a las 17:49
0

Puedes probar de esta manera, añadiendo un div extra para que te sirva como base para aplicar el flex al div padre:

*{
  box-sizing: border-box;
}

.info {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  background: #000;
  padding: 35px;
}

.wrapper {
  margin: auto;
  background: #ccc;
  padding: 35px;
}
<div class="info">
  <div class="wrapper">
    <div class="tm-sliders">
    <div class="sliders">
      <ul>
        <li><img src="slider1.jpg" alt="Diploma"></li>
        <li><img src="slider2.jpg" alt="Universidad del Norte de Texas"></li>
        <li><img src="slider3.jpg" alt="Universidad Mercer de Macon"></li>
      </ul>
    </div>
  </div>
  <ul class="ul-form">
    <div class="titulo1">
      <li class="year"><span>2000-2005</span></li>
      <li><u>Título oficial</u>: <span> Doctorado de Historia.</span></li>
      <li><u>Lugar de estudio</u>: <span> Universidad del Norte de Texas, Denton.</span></li>
    </div>
    <div class="titulo2">
      <li class="year"><span>2015-2019</span></li>
      <li><u>Título oficial</u>: <span> Licenciado en Ciencias de la Computación.</span></li>
      <li><u>Lugar de estudio</u>: <span> Universidad Mercer de Macon, Georgia.</span></li>
    </div>
  </ul>
  </div>
</div>

1
  • Entiendo lo de agregarle otro contenedor para que lo envuelva el .info, pero en vez de que sea con flex-direction: column, necesito que quede en row. Hice lo que me dijiste, le agregue el wrapper, le aplique las propiedades tanto a ese como al info y sigue sin funcionarme
    – MayD
    Commented el 16 feb. 2023 a las 17:35

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.