Question

我有一个用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;
}

Answer 1

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

然后做一些小修改以使尺寸良好。

它自动居中于此处，因为边框位于文本周围且文本具有二次大小（单个+）。另外，不要忘记使线高等于高度和，使其垂直居中。

Answer 2

使用line-height和text-align

.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;
}

Answer 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;
}

Answer 4

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

如果我将<a>的字体大小更改为16px，那么您就拥有了所需的内容。

中心链接文本在一个圆圈

4 个答案: