css - una - Alinea el texto en la parte inferior de un div
css alinear icono y texto (2)
Intenté alinear mi texto con la parte inferior de un div de otras publicaciones y respuestas en stackoverflow. Aprendí a manejar esto con diferentes propiedades de CSS. Pero no puedo hacerlo bien. Básicamente mi código html es así:
<div style=''height:200px; float:left; border:1px solid #ff0000; position:relative;''>
<span style=''position:absolute; bottom:0px;''>A Text</span>
</div>
El efecto es que en FF simplemente obtengo una línea vertical (el div en una forma contraída) y el texto se escribe al lado de él. ¿Cómo puedo evitar que se colapsen los div pero que el ancho se ajuste al texto?
Solución Flex
Está perfectamente bien si desea ir con la display: table-cell solución de display: table-cell . Pero en lugar de hackearlo, tenemos una mejor manera de lograr el mismo uso de la display: flex; . flex es algo que tiene un soporte decente .
.wrap {
height: 200px;
width: 200px;
border: 1px solid #aaa;
margin: 10px;
display: flex;
}
.wrap span {
align-self: flex-end;
}
<div class="wrap">
<span>Align me to the bottom</span>
</div>
En el ejemplo anterior, primero establecemos el elemento padre para display: flex; y luego, usamos align-self para flex-end . Esto le ayuda a empujar el artículo hasta el final del elemento flex .
Solución antigua (Válido si no está dispuesto a usar flex )
Si quiere alinear el texto en la parte inferior, no tiene que escribir tantas propiedades para eso, usando display: table-cell; con vertical-align: bottom; es suficiente
div {
display: table-cell;
vertical-align: bottom;
border: 1px solid #f00;
height: 100px;
width: 100px;
}
<div>Hello</div>
Ahora puede hacer esto con el justify-content: flex-end justify de Flexbox justify-content: flex-end ahora:
div {
display: flex;
justify-content: flex-end;
align-items: flex-end;
width: 150px;
height: 150px;
border: solid 1px red;
}
<div>
Something to align
</div>
Consulte su Caniuse para ver si Flexbox es adecuado para usted.