положение текста в ссылке, отображаемой как элемент блока

Question

Я хочу знать, как лучше расположить текст внутри элемента блока.

<a href="#">foo</a>

нормальная ссылка, но в стиле блока отображения с фоном

display: block;
width: 100px;
height: 100px;
background: #000000;

текст теперь вверху слева. Теперь вопрос: как лучше всего привести этот текст к примеру: внизу слева или внизу справа?

Я предпочитаю решение CSS без каких-либо новых элементов внутри A-Tag. Некоторые мнения?

Answer 1

Вы также можете использовать display: table-cell - однако, это не будет работать в <= IE7 </p>

http://jsfiddle.net/QU9gy/

Answer 2

Вы можете попробовать это тоже.

display: block;
width: 100px;
height: 100px;
background: #000000;
line-height:188px;
font-size:12px;
color:#fff;
text-decoration:none;

Если вы измените размер шрифта, чем значение меньше, чем 200px :), значит, если вы используете шрифт 18px, высота строки будет 182px, поэтому общее значение no будет 200px;

Answer 3

Вы не можете выбрать контент, чтобы сидеть внизу.Используя padding (padding-top), вы можете вручную сделать так, чтобы это выглядело как оправданное до основания.так что в приведенном выше примере попробуйте

display: block;
width: 100px;
height: 14px;
background: #000000;
padding-top: 86px