CSS вертикальный центр по кругу

Question

Я пытаюсь отцентрировать текст по центру якоря. Я использовал высоту строки, и она работает, но когда текст переносится, текст во второй строке получает высоту строки... Как я могу центрировать текст в привязке так, как это происходит?

http://jsfiddle.net/y2UYX/1/ - Нажмите на кружок, чтобы показать другие кружки, и вы поймете, что я имею в виду.

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

Большое спасибо!

Answer 1

Для этого вы можете использовать свойство display:table. напишите так:

.SubMenu li {
  margin:50px;
  background:red;
  border-radius:50px;
  height:100px;
  width:100px;
  display:table;
}

.SubMenu a {
   height:100px;
   width:100px;
   display:table-cell;
   text-align: center;
   vertical-align: middle;
}

Проверьте это http://jsfiddle.net/y2UYX/6/

Answer 2

Вы можете использовать стиль элемента для этого

element.style {
line-height: 13px;
padding-top: 37px;
height: 60px;}