css - una - Alinea el texto en la parte inferior de un div

css alinear icono y texto

Question

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?

Answer 1

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>

(O JSFiddle)

Answer 2

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.