将导航按钮中的链接居中？

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

您正在将text-align应用于具有非指定宽度的元素。将以下内容添加到ur css：

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