Внутри одного дива есть еще несколько дивов, расположенных друг под другом. Вот html:

CSS для этого следующий:
[CSS]
div.info {
width: 340px;
height: 589px;
}
div.info > div {
width: 340px;
height: 60px;
margin-left: 15px;
margin-bottom: 5px;
line-height: 5;
}
div.info > div a {
color: #FFF;
text-decoration: none;
font-size: 16px;
display: inline-block;
vertical-align: middle;
line-height:1;
height: 55px;
width: 270px;
}

div.info > div span {
font-size: 18px;
background: #fff;
border: 1px solid #576E6D;
padding: 5px;
margin-right: 10px;
-moz-border-radius: 50px; /* Firefox */
-webkit-border-radius: 50px; /* Safari, Google Chrome */0
-o-border-radius: 50px; /* Opera */
-ms-border-radius: 50px; /* IE8 */
border-radius: 50px;
display: inline-block;
height: 45px;
line-height: 40px;
float: left;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
[/CSS]
Проблема в том, что текст ссылок может быть любого объема (для каких-то блоков будет по одной строке, для каких-то по 3-5). Когда текст ссылки умещается в 1-2 строки, то все выглядит отлично. Когда больше двух строк, то текст вышележащего блока наползает на нижелещащий. Нужно сделать так, чтобы высота каждого блока зависела от контента и текст выравнивался по центру по вертикали. Пробовал использовать для родительского блока (c class="info") display:table, а для дочернего display:table-cell, но текст прижимается к верху, не работает vertical-align:middle.
Прошу подсказать хотя бы в каком направлении копать. Заранее спасибо!