¡Cómo colocar texto en la parte inferior cuando hay una altura predefinida!

Question

Esto debería ser increíblemente trivial, pero no lo es. Tengo una altura predefinida para un ancla, y me gustaría colocar el texto en la parte inferior.

<li><a class="my-text">My Text</a></li> 

Utilicé el siguiente CSS, que no funciona. El texto aún aparece en la parte superior.

a.my-text { 
    background-color:#cccc; 
    height:50px; 
    vertical-align:bottom; 
    width:100px; 
} 

La idea es: Quiero alinear el texto a la parte inferior, pero si hay un texto que es más de una línea, quiero que el flujo a ir a la parte superior, no empuje hacia abajo todo lo demás .. ¿Alguna idea de cómo esto podría lograrse?

Answer 1

Esto no puede hacerse usando css y el html que usted proporciona. Si pones un período adicional en el ancla, se puede hacer:

a.my-text { 
    height: 50px; 
    display: block; 
} 
a.my-text span { 
    position: absolute; 
    bottom: 0; 
} 

Answer 2

Usted puede utilizar bottom:0px con position:absolute de anclaje.

HTML

<li><a class="my-text">My Text</a></li> 

CSS

li { 
    position: relative; 
    height:200px; 
    border: 1px solid red; 
} 

a.my-text { 
    bottom: 0px; 
    border: 1px solid blue; 
    position: absolute; 
    background-color:#cccc; 
    width:100px; 
    height:50px; 
} 

Véase en jsfiddle.

Answer 3

Definitivamente no funcionaría, porque los anclajes <a> son etiquetas en línea, por lo tanto, asignarles alturas y anchuras es inútil. La propiedad vertical-align determina el posicionamiento de los elementos en línea con respecto a la línea en la que se encuentran, no la posición vertical del texto. (Ver http://reference.sitepoint.com/css/vertical-align) Por lo que yo entiendo, lo que está solicitando no se puede hacer. Sin embargo, existen alternativas, como se sugirió anteriormente, para lograr efectos similares.

Answer 4

El problema con su código es que el ancla no responderá a la altura/ancho porque es un elemento en línea. Si agrega un {display: block} al ancla, ahora es un elemento de bloque, pero, como recuerdo, vertical-align no funciona en el contenido de los elementos del bloque. Esta fue la forma más fácil que pude pensar en usar la pantalla : table-cell.

a.my-text { 
    background-color: #ccc; 
    height: 200px; width: 100px; 
    vertical-align: bottom; 
    display: table-cell; 
} 

Answer 5

Parece que sólo tiene que deshacerse de la regla de la altura en la etiqueta de anclaje y usar algo como padding-top: 45px en el li