1

No logro mover estos botones a la posicion deseada.
Como verán en la imagen más abajo. Tengo 2 div los cuales ocupan el 100% de la pantalla.
En el segundo div, el de abajo, tengo un par de botones centrados al medio, los cuales quiero ubicar hasta abajo del todo.

CSS:

.div2 {
  border: 1px dotted springgreen;
  text-align: center;
  vertical-align: bottom;
  height: 20%;
  width: 100%;
}

.div1 {
  border: 1px dotted yellowgreen;
  height: 80%;
  margin-top: auto;
}

HTML

<body>
  <div class="div1">

  </div>
  <div class="div2">
    <a href="reset-password.php" class="btn btn-warning">Cambia tu contraseña</a>
    <a href="logout.php" class="btn btn-danger">Cierra la sesión</a>
  </div>
</body>

Nótese que los bordes solo estan para verlos en la pagina.

introducir la descripción de la imagen aquí

2 respuestas 2

1

Yo haría lo siguiente:

  • Quito esta propiedad y valor:

     vertical-align: bottom;
    
  • Luego al div con class div2 le doy las siguientes propiedades:

    .div2 {
      border: 1px dotted springgreen;
      text-align: center;
      height: 20%;
      width: 100%;
      display: flex;
      align-items: flex-end;
     justify-content: center;
    }
    
  • Hago uso de flexbox para poder mover a los elementos internos a como cajas flexibles

  • Los desplazo horizontalmente al centro con justify-content y un valor de center y al fondo de manera vertical con flex-end

  • Finalmente para que los botones no queden pegados uno a lado del otro, los podemos separar con esto:

    a {
      margin: 0 5px 0 5px;
    }
    
3
  • Brujo! ahora, por que vertical-align no funciona como lo pienso, y align-item: flex-end si ??
    – Excorpion
    el 24 nov. 2020 a las 17:12
  • 1
    @Excorpion cuando se trata de desplazar elementos prefiero usar flexbox pues me brinda mas opciones, por otro lado prácticamente casi nunca he usado vertical-align además que según leo solo aplica para celdas en tablas y elementos en línea
    – BetaM
    el 24 nov. 2020 a las 17:29
  • Lo cual me hace suponer que si ese div no tuviera elementos en línea tales como p, otros divs, etc entonces no lograría desplazarlos
    – BetaM
    el 24 nov. 2020 a las 18:26
0

Puedes usar bottom: 0px; position: absolute; para situarlo abajo

.div2 {
  border: 1px dotted springgreen;
  text-align: center;
  vertical-align: bottom;
  height: 20%;
  width: 100%;
  bottom: 0px;
  position: absolute;
}

.div1 {
  border: 1px dotted yellowgreen;
  height: 80%;
  margin-top: auto;
}
<body>
  <div class="div1">

  </div>
  <div class="div2">
    <a href="reset-password.php" class="btn btn-warning">Cambia tu contraseña</a>
    <a href="logout.php" class="btn btn-danger">Cierra la sesión</a>
  </div>
</body>

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.