垂直对齐块<a>标记中的某些文本

Question

我需要一个css gunu来帮助我解决这个问题.我有一个标签,它是一个固定宽度和高度的块元素.其中是背景图像和图像标题.我正在尝试将文本对齐到底部,我没有在哪里.我试过做显示:table-cell; 垂直对齐:底部; 和各种不同的方式.无处可去.我知道我可以做行高,但在元素周围有奇怪的虚线.只是尝试在一个标签内有一个带有文本的跨度并且垂直对齐但是虽然下划线已经移动到底部但没有快乐.这很奇怪!任何帮助非常感谢.理查德

Answer 1

父元素需要显示:table然后底部所需的元素显示:table-cell; 对齐:底部;

Answer 2

您要针对哪些浏览器？这在IE8.0.6和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>

注意我已经使用了display:table-cell;和vertical-align:bottom;.你需要他们两个; 我不确定你是否尝试过.

如果这给你带来麻烦(你是否针对IE6？)你将不得不将你的<a>元素放在块级元素中然后定位它.

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