Вертикальное выравнивание текста в теге блока <a>

Question

Мне нужен css gunu, чтобы помочь мне с этим. Хорошо, у меня есть тег, который является элементом блока фиксированной ширины и высоты. Внутри него фоновое изображение и заголовок изображения. Я пытаюсь выровнять текст снизу, и я не получаю где. Я пытался сделать дисплей: таблица-клетки; вертикально-Align: снизу; и всякого рода разными способами. Бу некуда. Я знаю, что могу сделать высоту строки, но у этого элемента есть та странная пунктирная линия вокруг элемента. Только что попробовал иметь промежуток с текстом внутри тега и выровнять по вертикали, но без радости, хотя подчеркивание переместилось вниз. Что странно! Любая помощь высоко ценится. Ричард

Answer 1

Родительский элемент нуждается в display: table, а затем элемент, который вы хотите внизу, имеет display: 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>