Alinear DIV al fondo o la línea de base

Question 1

Estoy tratando de alinear una etiqueta div secundaria con la parte inferior o la línea de base de la etiqueta div principal.

Todo lo que quiero hacer es tener el Div hijo en la línea de base del Div padre, así es como se ve ahora:

HTML

<div id="parentDiv">
<div class="childDiv"></div>
</div>

CSS

#parentDiv
{
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}
#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
}

Nota

Tendré múltiples childDivs con diferentes alturas, y las necesitaré todas para alinearse con la línea de base / parte inferior.

Question 2

Necesitas agregar esto:

#parentDiv {
  position: relative;
}

#parentDiv .childDiv {
  position: absolute;
  bottom: 0;
  left: 0;
}

Al declarar el absoluteelemento, se posiciona de acuerdo con su padre más cercano que no lo es static(debe ser absolute, relativeo fixed).

Question 3

Siete años después, las búsquedas de alineación vertical todavía plantean esta pregunta, por lo que publicaré otra solución que tenemos disponible ahora: posicionamiento flexbox. Simplemente configure display:flex; justify-content: flex-end; flex-direction: columnel div padre (demostrado en este violín también):

#parentDiv
{
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}

Question 4

Utilice los valores de visualización CSS de la tabla y la celda de la tabla:

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,body {
    width: 100%;
    height: 100%;
}
.valign {
    display: table;
    width: 100%;
    height: 100%;
}
.valign > div {
    display: table-cell;
    width: 100%;
    height: 100%;
}
.valign.bottom > div {
    vertical-align: bottom;
}

He creado una demostración de JSBin aquí: http://jsbin.com/INOnAkuF/2/edit

La demostración también tiene un ejemplo de cómo alinear en el centro verticalmente usando la misma técnica.

Question 5

esto funciona (solo probé ie & ff):

<html>
<head>
    <style type="text/css">
        #parent {
            height: 300px;
            width: 300px;
            background-color: #ccc;
            border: 1px solid red;
            position: relative;
        }
        #child  {
            height: 100px;
            width: 30px;
            background-color: #eee;
            border: 1px solid green;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="parent">parent
        <div id="child">child</div>
    </div>
    outside
</body>
</html>

Espero que ayude.

Question 6

La respuesta publicada por Y. Shoham (usando posicionamiento absoluto) parece ser la solución más simple en la mayoría de los casos donde el contenedor tiene una altura fija, pero si el DIV principal tiene que contener varios DIV y ajustar automáticamente su altura en función del contenido dinámico, entonces puede haber un problema. Necesitaba tener dos bloques de contenido dinámico; uno alineado con la parte superior del contenedor y otro con la parte inferior y aunque pude hacer que el contenedor se ajustara al tamaño del DIV superior, si el DIV alineado con la parte inferior fuera más alto, no cambiaría el tamaño del contenedor sino que se extendería hacia afuera . El método descrito anteriormente por romiem que usa el posicionamiento estilo tabla, aunque un poco más complicado, es más robusto a este respecto y permite la alineación al fondo y la altura automática correcta del contenedor.

CSS

#container {
        display: table;
        height: auto;
}

#top {
    display: table-cell;
    width:50%;
    height: 100%;
}

#bottom {
    display: table-cell;
    width:50%;
    vertical-align: bottom;
    height: 100%;
}

HTML

<div id=“container”>
    <div id=“top”>Dynamic content aligned to top of #container</div>
    <div id=“bottom”>Dynamic content aligned to botttom of #container</div>
</div>

Me doy cuenta de que esta no es una respuesta nueva, pero quería comentar sobre este enfoque, ya que me llevó a encontrar mi solución, pero como novato no se me permitió comentar, solo publicar.

Question 7

Probablemente tendría que configurar el div secundario para tener position: absolute.

Actualice el estilo de su hijo a

#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
  position:absolute;
  top:207px;
}

Question 8

Una publicación antigua, pero pensé en compartir una respuesta para cualquiera que busque. Y porque cuando lo usas las absolutecosas pueden salir mal. Lo que yo haría es

HTML

<div id="parentDiv"></div>
<div class="childDiv"></div>

El CSS

parentDiv{

}
childDiv{
    height:40px;
    margin-top:-20px;
}

Y eso simplemente colocaría ese div inferior de nuevo en el div principal. seguro para la mayoría de los navegadores también

Question 9

Tuve algo similar y lo hice funcionar agregando efectivamente algo de relleno al niño.

Estoy seguro de que algunas de las otras respuestas aquí llegarían a la solución, pero no pude hacer que funcionen fácilmente después de mucho tiempo; En cambio, terminé con la solución acolchada que es elegante en su simplicidad, pero me parece un poco hackea (sin mencionar que el valor de píxel que establece probablemente dependería de la altura del padre).

Question 10

td {
  height: 150px;
  width: 150px;
  text-align: center;
}

b {
  border: 1px solid black;
}

.child-2 {
  vertical-align: bottom;
}

.child-3 {
  vertical-align: top;
}

<table border=1>
  <tr>
    <td class="child-1">
      <b>child 1</b>
    </td>
    <td class="child-2">
     <b>child 2</b>
    </td>
    <td class="child-3">
      <b>child 3</b>
    </td>
  </tr>
</table>

Expandir fragmento

Esta es mi solucion

Question 11

Si tiene múltiples Div hijos dentro de su Div padre, entonces puede usar la propiedad de alineación vertical algo como a continuación:

.Parent div
{
  vertical-align : bottom;
}

Answer 1

95

Estoy tratando de alinear una etiqueta div secundaria con la parte inferior o la línea de base de la etiqueta div principal.

Todo lo que quiero hacer es tener el Div hijo en la línea de base del Div padre, así es como se ve ahora:

HTML

<div id="parentDiv">
<div class="childDiv"></div>
</div>

CSS

#parentDiv
{
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}
#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
}

Nota

Tendré múltiples childDivs con diferentes alturas, y las necesitaré todas para alinearse con la línea de base / parte inferior.

html css sia
fuente

ni siquiera estaba pensando! Acabo de eliminar la altura en el parentDiv y todo el childDiv ahora se sienta en la línea de base. ¡Soy solo una tonta sally!

sia

Pero si desea que tenga una altura específica, debe usar el absoluteposicionamiento de acuerdo con el padre.

Y. Shoham

Answer 2

ni siquiera estaba pensando! Acabo de eliminar la altura en el parentDiv y todo el childDiv ahora se sienta en la línea de base. ¡Soy solo una tonta sally!

sia

Answer 3

Pero si desea que tenga una altura específica, debe usar el absoluteposicionamiento de acuerdo con el padre.

Y. Shoham

Answer 4

154

Necesitas agregar esto:

#parentDiv {
  position: relative;
}

#parentDiv .childDiv {
  position: absolute;
  bottom: 0;
  left: 0;
}

Al declarar el absoluteelemento, se posiciona de acuerdo con su padre más cercano que no lo es static(debe ser absolute, relativeo fixed).

Y. Shoham
fuente

7

Dudo que esto haga lo que él quiere, actualmente esto colocará todos (parece que habrá varios elementos secundarios si es un gráfico de barras dinámico) uno encima del otro.

crmepham

Answer 5

7

Dudo que esto haga lo que él quiere, actualmente esto colocará todos (parece que habrá varios elementos secundarios si es un gráfico de barras dinámico) uno encima del otro.

crmepham

Answer 6

52

Siete años después, las búsquedas de alineación vertical todavía plantean esta pregunta, por lo que publicaré otra solución que tenemos disponible ahora: posicionamiento flexbox. Simplemente configure display:flex; justify-content: flex-end; flex-direction: columnel div padre (demostrado en este violín también):

#parentDiv
{
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}

gcbenison
fuente

1

Sencillo. Exactamente lo que quería. Úselo align-items: flex-start;si no desea estirar los artículos.

Madhan

¡Esta es la mejor respuesta en estos días!

Rens Groenveld

Answer 7

1

Sencillo. Exactamente lo que quería. Úselo align-items: flex-start;si no desea estirar los artículos.

Madhan

Answer 8

¡Esta es la mejor respuesta en estos días!

Rens Groenveld

Answer 9

12

Utilice los valores de visualización CSS de la tabla y la celda de la tabla:

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,body {
    width: 100%;
    height: 100%;
}
.valign {
    display: table;
    width: 100%;
    height: 100%;
}
.valign > div {
    display: table-cell;
    width: 100%;
    height: 100%;
}
.valign.bottom > div {
    vertical-align: bottom;
}

He creado una demostración de JSBin aquí: http://jsbin.com/INOnAkuF/2/edit

La demostración también tiene un ejemplo de cómo alinear en el centro verticalmente usando la misma técnica.

Romiem
fuente

1

Por toda la mierda que se ponga en las mesas, a veces esta es la mejor solución

Sean256

esta fue la mejor solución para mí

bowlerae

Esto realmente es la mejor solución, ya que el uso de elementos con posición absoluta normalmente cambia la altura del elemento padre

hamncheez

Answer 10

1

Por toda la mierda que se ponga en las mesas, a veces esta es la mejor solución

Sean256

Answer 11

esta fue la mejor solución para mí

bowlerae

Answer 12

Esto realmente es la mejor solución, ya que el uso de elementos con posición absoluta normalmente cambia la altura del elemento padre

hamncheez

Answer 13

esto funciona (solo probé ie & ff):

<html>
<head>
    <style type="text/css">
        #parent {
            height: 300px;
            width: 300px;
            background-color: #ccc;
            border: 1px solid red;
            position: relative;
        }
        #child  {
            height: 100px;
            width: 30px;
            background-color: #eee;
            border: 1px solid green;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="parent">parent
        <div id="child">child</div>
    </div>
    outside
</body>
</html>

Espero que ayude.

Answer 14

La respuesta publicada por Y. Shoham (usando posicionamiento absoluto) parece ser la solución más simple en la mayoría de los casos donde el contenedor tiene una altura fija, pero si el DIV principal tiene que contener varios DIV y ajustar automáticamente su altura en función del contenido dinámico, entonces puede haber un problema. Necesitaba tener dos bloques de contenido dinámico; uno alineado con la parte superior del contenedor y otro con la parte inferior y aunque pude hacer que el contenedor se ajustara al tamaño del DIV superior, si el DIV alineado con la parte inferior fuera más alto, no cambiaría el tamaño del contenedor sino que se extendería hacia afuera . El método descrito anteriormente por romiem que usa el posicionamiento estilo tabla, aunque un poco más complicado, es más robusto a este respecto y permite la alineación al fondo y la altura automática correcta del contenedor.

CSS

#container {
        display: table;
        height: auto;
}

#top {
    display: table-cell;
    width:50%;
    height: 100%;
}

#bottom {
    display: table-cell;
    width:50%;
    vertical-align: bottom;
    height: 100%;
}

HTML

<div id=“container”>
    <div id=“top”>Dynamic content aligned to top of #container</div>
    <div id=“bottom”>Dynamic content aligned to botttom of #container</div>
</div>

Me doy cuenta de que esta no es una respuesta nueva, pero quería comentar sobre este enfoque, ya que me llevó a encontrar mi solución, pero como novato no se me permitió comentar, solo publicar.

Answer 15

3

Probablemente tendría que configurar el div secundario para tener position: absolute.

Actualice el estilo de su hijo a

#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
  position:absolute;
  top:207px;
}

Ravia
fuente

Intenté eso, pero lo que necesito es que la parte inferior del childDiv se siente en la parte inferior del parentDiv, el gráfico debe ser dinámico y las alturas variarán de cada childDiv al siguiente ... el posicionamiento podría funcionar pero no lo he hecho dejar de descubrir algo que es sólido ...

sia

5

no es una buena idea establecer la parte superior en 207 (algún número arbitrario) mejor establecer la parte inferior: 0

pstanton

Answer 16

Intenté eso, pero lo que necesito es que la parte inferior del childDiv se siente en la parte inferior del parentDiv, el gráfico debe ser dinámico y las alturas variarán de cada childDiv al siguiente ... el posicionamiento podría funcionar pero no lo he hecho dejar de descubrir algo que es sólido ...

sia

Answer 17

5

no es una buena idea establecer la parte superior en 207 (algún número arbitrario) mejor establecer la parte inferior: 0

pstanton

Answer 18

Una publicación antigua, pero pensé en compartir una respuesta para cualquiera que busque. Y porque cuando lo usas las absolutecosas pueden salir mal. Lo que yo haría es

HTML

<div id="parentDiv"></div>
<div class="childDiv"></div>

El CSS

parentDiv{

}
childDiv{
    height:40px;
    margin-top:-20px;
}

Y eso simplemente colocaría ese div inferior de nuevo en el div principal. seguro para la mayoría de los navegadores también

Answer 19

Esto haría que childDiv se encuentre en la mitad inferior del parentDiv. Necesita al menos usar -40px en el margen superior. También es la mejor práctica para usar la posición: relativa; en este caso para ambos divs.

Augus

Answer 20

Tuve algo similar y lo hice funcionar agregando efectivamente algo de relleno al niño.

Estoy seguro de que algunas de las otras respuestas aquí llegarían a la solución, pero no pude hacer que funcionen fácilmente después de mucho tiempo; En cambio, terminé con la solución acolchada que es elegante en su simplicidad, pero me parece un poco hackea (sin mencionar que el valor de píxel que establece probablemente dependería de la altura del padre).

Answer 21

td {
  height: 150px;
  width: 150px;
  text-align: center;
}

b {
  border: 1px solid black;
}

.child-2 {
  vertical-align: bottom;
}

.child-3 {
  vertical-align: top;
}

<table border=1>
  <tr>
    <td class="child-1">
      <b>child 1</b>
    </td>
    <td class="child-2">
     <b>child 2</b>
    </td>
    <td class="child-3">
      <b>child 3</b>
    </td>
  </tr>
</table>

Expandir fragmento

Esta es mi solucion

Answer 22

-6

Si tiene múltiples Div hijos dentro de su Div padre, entonces puede usar la propiedad de alineación vertical algo como a continuación:

.Parent div
{
  vertical-align : bottom;
}

Pawan
fuente

¿Por qué tantos votos negativos para esto sin comentarios? ¿No resuelve el problema? Las investigaciones en línea sugieren que debería hacerlo.

sholsapp

Answer 23

¿Por qué tantos votos negativos para esto sin comentarios? ¿No resuelve el problema? Las investigaciones en línea sugieren que debería hacerlo.

sholsapp

Alinear DIV al fondo o la línea de base

Respuestas: