Vertical Alinear texto en un bloque <a> tag

Question

Necesito un css gunu para ayudarme con este. Derecha Tengo una etiqueta a que es un elemento de bloque de ancho y alto fijo. Dentro de ella hay una imagen de fondo y el título de las imágenes. Estoy tratando de alinear el texto hasta el final y no estoy llegando a ninguna parte. He intentado hacer display: table-cell; vertical-alinear: inferior; y todo tipo de formas diferentes. Bu llegando a ninguna parte. Sé que puedo hacer la altura de la línea, pero tiene esa línea punteada extraña alrededor del elemento. Acabo de intentar tener un lapso con el texto dentro de la etiqueta a y alinearlo verticalmente pero sin alegría, aunque el subrayado se ha movido hacia abajo. ¡Lo cual es extraño! Cualquier ayuda muy apreciada. Richard

Answer 1

El elemento padre necesita pantalla: mesa y luego el elemento que desee en la parte inferior tiene display: table-cell; alinear: abajo;

Answer 2

¿A qué navegadores está apuntando? Esto funciona muy bien para mí en IE8.0.6 y Firefox 3.5.8:

<a style="display:block;height:200px;width:200px;background:blue;display:table-cell;vertical-align:bottom;">This is a test</a> 

Nota que he usado tanto display:table-cell; y vertical-align:bottom;. Los necesitas a los dos; No estaba seguro de si lo había intentado.

Si eso le ocasiona problemas (¿se dirige a IE6?) Tendrá que colocar su elemento <a> en un elemento de nivel de bloque y luego colocarlo.

<div style="position:relative;top:0px;left:0px;height:200px;width:200px;background:yellow;"> 
    <a style="position:absolute;bottom:0px;">Your text</a> 
</div>