垂直对齐块 <a> 标签中的一些文本答案

【问题标题】：Vertical Aligning some text in a block <a> tag垂直对齐块 <a> 标签中的一些文本
【发布时间】：2011-01-27 18:23:30
【问题描述】：

我需要一个 CSS gunu 来帮助我解决这个问题。对，我有一个标签，它是一个固定宽度和高度的块元素。其中有一个背景图像和图像标题。我正在尝试将文本与底部对齐，但我无处可去。我试过做显示：表格单元格；垂直对齐：底部；以及各种不同的方式。卜无处可去。我知道我可以做 line-height ，但是元素周围有一条奇怪的虚线。刚刚尝试在 a 标签内设置文本的跨度并垂直对齐，但尽管下划线已移至底部，但没有任何乐趣。这很奇怪！非常感谢任何帮助。理查德

【问题讨论】：

如果您发布您当前的 html+css 会更容易提供帮助。

标签： html css tags vertical-alignment

【解决方案1】：

您的目标浏览器是什么？这在 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>

【讨论】：

感谢您的回复。我在所有浏览器上都很好。但问题是我也在浮动 a 标签，这意味着这似乎不想玩球。至少第一个不在 ie8 或 ff3.6 中

【解决方案2】：

父元素需要 display:table 然后你想要的元素在底部有 display:table-cell;对齐：底部;

【讨论】：