Выравнивание по вертикали некоторого текста в блочном <a> теге
-
20-09-2019 - |
Вопрос
Мне нужен css-gunu, который помог бы мне с этим.Справа у меня есть тег a, который представляет собой блочный элемент фиксированной ширины и высоты.Внутри него находится фоновое изображение и заголовок изображения.Я пытаюсь выровнять текст по низу, но у меня ничего не получается.Я пытался сделать отобразить:таблица-ячейка;выравнивание по вертикали:снизу;и самыми разными способами.Но это ни к чему не приведет.Я знаю, что я мог бы увеличить высоту строки, но у этого есть эта странная пунктирная линия вокруг элемента.Просто попробовал установить интервал с текстом в нем внутри тега a и выровнять его по вертикали, но безрезультатно, хотя подчеркивание переместилось в низ.Что странно!Любая помощь очень ценится.Ричард
Решение
Родительский элемент нуждается в отображении: таблица, а затем элемент, который вы хотите внизу, имеет отображение: таблица-ячейка;выровнять: снизу;
Другие советы
На какие браузеры вы ориентируетесь?Это отлично работает для меня в 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>