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%);
}

在圆形链接中完全居中文本

1 个答案: