Вертикально выравнивать текст в элементе <a>с помощью CSS

Может кто-нибудь объяснить, как я вертикально выравниваю текст в элементах <a> - так что оба текста появляются в середине красного квадрата?

http://jsfiddle.net/WeKtX/

Здесь мой HTML:

<ul>
<li><a href="#">this is a link</a></li>
<li><a href="#">this is an even longer link</a></li>
</ul>

и мой CSS:

li {list-style-type:none;margin:0;padding:0}
li a {width:100px;float:left;background:red;margin-right:20px;height:40px}

Большое спасибо за любые указатели

Ответы

Ответ 1

Если вы хотите центрировать текст по горизонтали, попробуйте:

text-align: center;

Если вы хотите центрировать текст по вертикали, попробуйте:

line-height: 40px; //Where 40px is the height of your parent element

Имейте в виду, что при использовании строки-высоты она будет работать только в одной строке текста. Если вы хотите сделать несколько строк текста, я боюсь, что вы должны указать высоту текста, а затем использовать position: absolute; в тексте с position: relative; в родительском элементе.

Для вашего многострочного примера я бы попробовал что-то вроде следующего jsFiddle:

li {
    list-style-type:none;
    margin:0;
    padding:0;
    position: relative;
    height: 60px;
    width: 200px;
    display: block;
    background:red;
}

li a {
    width:100px;
    height:40px;
    position: absolute;
    top: 50%;
    margin-top: -20px;
}