Центрирование ссылок внутри кнопок навигации?

Question

Хорошо, мне нужно центрировать текст внутри этих круглых кнопок. Живая демонстрация здесь: http://codepen.io/DerekDev/pen/XJjYoX

.top { 
    background-color: #2a2a2a; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    height:200px; 
} 
.nav { 
    background-color: #202020; 
    height:125px; 
    position:absolute; 
    top:200px; 
    left:0; 
    right:0; 
} 
.nav li { 
    float:left; 
    display:inline; 
    display:block; 
    margin-left:30px; 
    margin-right:30px; 
    border-radius: 50%; 
    width: 100px; 
    height: 100px; 
    background-color: #bf5e00; 
    font-family: 'Roboto', sans-serif; 
    font-weight:100; 
    font-size:24px; 
    transition: 1s; 
} 
.nav li:hover { 
    background-color: #db7109; 
} 
.nav li a { 
    color:#ffffff; 
    text-decoration:none; 
    position:absolute; 
    padding-top:30px; 
    padding-bottom:30px; 
    text-align:center; 
} 
.nav li a:hover { 
} 

Так что, если у вас есть решение, было бы весьма признателен!

Answer 1

Вы применяете текстовое выравнивание к элементу с не указанной шириной. Добавить следующее в ur css:

.nav li a { 
    width: 100px; 
    //rest of your code 
}