Как разместить текст внизу, когда есть заданная высота! - PullRequest
Новая
       5

Как разместить текст внизу, когда есть заданная высота!

6 голосов
/ 14 августа 2010

Это должно быть невероятно тривиально, но это не так.У меня есть предопределенная высота для привязки, и я хотел бы разместить текст внизу. 

<li><a class="my-text">My Text</a></li>

Я использовал следующий CSS, который не работает.Текст по-прежнему отображается вверху. 

a.my-text {
     background-color:#cccc;
     height:50px;
     vertical-align:bottom;
     width:100px;
}

Идея такова: я хочу выровнять текст по низу, но если текст длиннее одной строки, я хочу, чтобы избыточный поток перешелверх, не толкайте все остальное вниз ... есть идеи, как этого можно достичь?

Ответы [ 5 ]

2 голосов
/ 14 августа 2010

Вы можете использовать bottom:0px с position:absolute в привязке.

HTML 

<li><a class="my-text">My Text</a></li>

CSS 

li {
    position: relative;
    height:200px;
    border: 1px solid red;
}

a.my-text {
    bottom: 0px;
    border: 1px solid blue;
    position: absolute;
    background-color:#cccc;
    width:100px;
    height:50px;
}

См. В jsfiddle .

2 голосов
/ 14 августа 2010

Это невозможно сделать с помощью CSS и HTML, который вы предоставляете. Если вы добавите дополнительный интервал в якорь, это можно сделать: 

a.my-text {
  height: 50px;
  display: block;
}
a.my-text span {
  position: absolute;
  bottom: 0;
}
1 голос
/ 14 августа 2010

Проблема с вашим кодом в том, что якорь не будет реагировать на высоту / ширину, потому что это встроенный элемент.Если вы добавите {display: block} к якору, то это теперь элемент блока, но, насколько я помню, vertical-align не работает с содержимым элементов блока,Это был самый простой способ использования дисплея : table-cell . 

a.my-text {
  background-color: #ccc;
  height: 200px; width: 100px;
  vertical-align: bottom;
  display: table-cell;
}
1 голос
/ 14 августа 2010

Определенно это не сработает, потому что якоря <a> являются встроенными тегами, поэтому присвоение им высот и ширины бесполезно.Свойство vertical-align определяет расположение встроенных элементов относительно линии, в которой они находятся, а не вертикальную позицию текста.(См. http://reference.sitepoint.com/css/vertical-align) Насколько я понимаю, то, что вы запрашиваете, не может быть сделано. Однако, как предложено выше, существуют альтернативы для достижения аналогичных эффектов.

0 голосов
/ 14 августа 2010

Похоже, вам просто нужно избавиться от правила высоты на теге привязки и использовать что-то вроде padding-top: 45px на li

...