0

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

4 回答 4

2

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

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

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

于 2013-06-04T18:07:30.263 回答
1

使用 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;
}
于 2013-06-04T18:07:38.907 回答
0

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

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

于 2013-06-04T18:23:50.783 回答
0

你尝试过这样的事情吗？

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;
}
于 2013-06-04T18:07:16.020 回答