垂直对齐块<a> tag</a>中的某些文本

时间:2010-03-15 16:20:45

标签: html css tags vertical-alignment

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

2 个答案:

答案 0 :(得分:9)

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

答案 1 :(得分:6)

您要针对哪些浏览器?这在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>