Alinear el botón en la parte inferior de div usando CSS


105

Quiero alinear mi botón en la esquina inferior derecha de mi div. ¿Cómo puedo hacer eso?

ingrese la descripción de la imagen aquí

CSS actual de div:

    float: right;
    width: 83%;
    margin-right: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    height:625px;
    overflow:auto;

Respuestas:


224

Puede usar position:absolute;para posicionar absolutamente un elemento dentro de un div padre. Cuando se usa, position:absolute;el elemento se posicionará absolutamente desde el primer div principal posicionado, si no puede encontrar uno, se posicionará absolutamente desde la ventana, por lo que deberá asegurarse de que el div de contenido esté posicionado.

Para hacer que el contenido esté posicionado en div, todos los positionvalores que no son estáticos funcionarán, pero relativees el más fácil ya que no cambia la posición de los divs por sí mismo.

Así que agregue position:relative;al div de contenido, elimine el flotador del botón y agregue el siguiente CSS al botón:

position: absolute;
right:    0;
bottom:   0;

1
@Harry Joy: ¿También aplicaste position: relativeal elemento que contiene tu formulario + botón?
thirtydot

1
@Harry Joy: Entonces debería ser relativo a eso div, no a la página. Si el pie de página también está incluido en esto div, tal vez parezcan ser lo mismo. Si conoce la altura de su pie de página, en el botón puede utilizar bottom: HEIGHT_OF_FOOTERpx.
thirtydot

1
@Harry Joy: Entonces hay demasiada confusión aquí. Debe publicar su HTML / CSS como un caso de prueba de jsFiddle .
thirtydot

1
@thirtydot: Lo tengo funcionando. Thnx. mal colocado la posición: relativa. Se agregó en div incorrecto.
Harry Joy

3
Realmente solo tengo que hacer un comentario y realmente señalar lo feliz que estoy de haber encontrado esta solución. ¡Esto me ha estado molestando durante años!
K. Kilian Lindberg

31

CSS3 flexbox también se puede usar para alinear el botón en la parte inferior del elemento principal.

HTML requerido:

<div class="container">
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>

CSS necesario:

.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}

Captura de pantalla:

Imagen de salida

Recursos útiles:


12

El contenedor principal debe tener esto:

position: relative;

El propio botón tiene que tener esto:

position: relative;
bottom: 20px;
right: 20px;

o lo que quieras


6
Tenga en cuenta que esta pregunta se hizo hace casi 3 años y obtuvo una respuesta.
Itay Gal

Tenga en cuenta que esta respuesta es incorrecta. Con position:relativeel botón se moverá de su posición original en lugar de basarse en el padre.
Kokos

1
Debe usarlo position: absolutepara hacerlo desde la parte inferior derecha.
CaptainBli

-26

Va a la derecha y se puede utilizar de la misma forma para la izquierda.

.yourComponent
{
   float: right;
   bottom: 0;
}

3
Esto solo alinea su botón a la derecha. No es la parte inferior derecha.
Ruben
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.