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

como centrar un boton en html con css

Question

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

Css de div actual:

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

Answer 1

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:

Recursos útiles:

• Specs
• MDN
• Trucos de CSS

* {box-sizing: border-box;}
body {
  background: linear-gradient(orange, yellow);
  font: 14px/18px Arial, sans-serif;
  margin: 0;
}
.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
  padding: 10px;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}
.container .btn-holder button {
  padding: 10px 25px;
  background: blue;
  font-size: 16px;
  border: none;
  color: #fff;
}

<div class="container">
  <p>Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... </p>
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>

Answer 2

El contenedor principal debe tener esto:

position: relative;

El botón en sí tiene que tener esto:

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

o lo que quieras

Answer 3

Puedes usar position:absolute; para posicionar absolutamente un elemento dentro de un div principal. Cuando se usa position:absolute; el elemento se colocará completamente desde el div principal que se encuentra en la primera posición, si no puede encontrar uno, se posicionará completamente desde la ventana, por lo que deberá asegurarse de que se ubique el div de contenido.

Para hacer que el contenido div se ubique, todos los valores de position que no son estáticos funcionarán, pero el relative es el más fácil ya que no cambia el posicionamiento de los divs por sí mismo.

Así que agrega position:relative; al contenido div, quite el flotador del botón y agregue el siguiente css al botón:

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

Answer 4

Va a la derecha y se puede usar de la misma manera para la izquierda

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