html - 圆形链接中的文本完全居中

Question

我已经在网站上阅读了有关此主题的相关答案。我确实最终能够通过减小字体大小将其居中，但是，它给我留下了小文本和大圆圈。

这里是:

<nav>
    <ul>
        <li class="circle"><a href="index.html">About</a>

        </li>
        <li class="circle"><a href="coding.html">Coding</a>

        </li>
        <li class="circle"><a href="health.html">Health</a>

        </li>
        <li class="circle"><a href="contact.html">Contact</a>

        </li>
    </ul>
</nav>

CSS

.circle {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    font-size: 7px;
    line-height: 25px;
    text-align: center;
}

http://jsfiddle.net/theskinnyreader/c3evfj5b/

我想知道如何在下面的代码中将大小的文本居中并使圆圈的大小保持最小。

CSS

.circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    font-size: 10px;
    line-height: 10px;
    text-align: center;
}

http://jsfiddle.net/theskinnyreader/fdu1dqko/

Answer 1

此代码有效:

这里改变的是我让 .circle 有一个相对位置，这样标签中的文本可以有一个绝对位置。然后将锚定在顶部的 50% 和左侧的 50% 处，并将其向后移动 50% 并向上移动 50%。我只添加了 -webkit-transform，因为我的浏览器是 chrome，但你也应该添加一个带有 -moz-、-ms- 和 -o- 的浏览器

nav {
    text-align: center;
    padding: 10px 0;
    margin: 20px 0 0;
}
nav ul {
    list-style: none;
    margin: 0;
    10px;
    padding: 0;
}
nav li {
    display: inline-block;
    margin: 20px;
    padding: 3%;
    border: 1px solid black;
}
.circle {
    position: relative;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    line-height: 25px;
    text-align: center;
}

.circle a {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}