在一个圆圈中居中链接文本答案

【问题标题】：Center link text in a circle在一个圆圈中居中链接文本
【发布时间】：2013-06-05 02:23:50
【问题描述】：

我有一个用 CSS 创建的 cicle，它绝对位于它的容器中。圆圈中的文字是一个链接。这个链接可以在圆圈内垂直和水平居中吗？我在 Firefox 和 Chrome 上进行测试，浏览器设置为 320px 宽。我也在 iOS Safari Mobile 上进行测试。

这是我为展示我目前所处的位置而制作的小提琴：

http://jsfiddle.net/rFZBA/

这是 HTML：

<div class="container">
    <div class="circle">
        <a href="#">+</a>    
    </div>
</div>

这是 CSS：

.container {
    position:relative;
    width:300px;
    height:100px;
    background-color:#999;
}    

.circle {
    position:absolute;
    left:100px;
    top:50px;

    height:1.25em;/** 20px / 16px = 1.25em **/
    width:1.25em;/** 20px / 16px = 1.25em **/

    padding:0.75em;  /** 12px / 16px = 0.75em  **/
    border-radius:1.375em;  /* Half of 44px is  22px :: 22px / 16px = 1.375em **/   
    background-color:#4d90fe;
    color:#FFF;
    box-shadow:1px 1px 2px 2px rgba(0, 0, 0, 0.4);
    text-align:center;  
}

.circle > a {
    color:#FFF; 
    text-decoration:none;
    font-size:2.5em;
    font-weight:bold;
}

【问题讨论】：

除非我遗漏了什么，否则我可以根据您的代码将其居中，方法是将顶部/左侧更改为： position:absolute;左：130px；顶部：28px;
@Daniel 这不是关于圆中心，而是圆中的加号。

标签： html css

【解决方案1】：

只需将.circle 应用于<a> 标签：http://jsfiddle.net/rFZBA/16/

然后再做一些小修改，使大小合适。

它在此处自动居中，因为边框在文本周围并且文本是二次大小（单个+）。另外，不要忘记让 line-height 等于 height 和 with，这样就垂直居中了。

【讨论】：

谢谢！这真的很接近。它在我的桌面 firefox 浏览器上看起来很棒，但是当我在 iOS 的 Mobile Safari 上测试它时，“+”并没有完全居中。我想知道为什么会有差异。
我也有 iOS 6 iPhone。 “+”号似乎在红色圆圈中稍低，稍微偏离中心。
@Mdd 哪个红圈？唯一的一个是蓝色的。当我尝试计算像素时，它完全居中。
@Mdd 至少在我查看小提琴时。你确定你已经复制了所有东西吗？
抱歉，我正在更新小提琴并将其颜色更改为红色，以便与居中的内容形成更多对比。我会看看我是否能找到另一台装有 iOS 6 的 iPhone。在我的身上，+ 号比圆圈的中心略低。盒子阴影可能是它对我出现这种方式的原因吗？

【解决方案2】：

使用行高和文本对齐

.circle > a {
    color:#FFF; 
    text-decoration:none;
    font-size:2.5em;
    font-weight:bold;
line-height:0.625em /* wich is 1.25em (2.5/5X1.25)  or use : 1.25rem; */;
text-align:center;
}

【讨论】：

【解决方案3】：

你尝试过这样的事情吗？

http://jsfiddle.net/rFZBA/10/

.circle > a {
    color:#FFF; 
    text-decoration:none;
    font-size:2.5em;
    font-weight:bold;
    display:block;
    position:absolute;
    left:10.5px;
    top:0px;
}

【讨论】：

【解决方案4】：

我可以通过将display: table; 添加到.circle 和display: table-cell; vertical-align: middle; 到.circle a 来使其居中；但是，它创建了一个长方形物体，而不是一个纯圆形。这是小提琴。 http://jsfiddle.net/Nirvanachain/rFZBA/

如果我将<a> 的字体大小更改为 16 像素，那么您将得到您想要的。

【讨论】：