CSS环绕超链接的圆形样式

Question

CSS环绕超链接的圆形样式

7

是否可以使用CSS在超链接周围创建一个大圆圈？

我正在尝试实现它，但我的圆圈非常小。我希望圆圈的大小与超链接的大小相似。如果我将超链接放在一个div中，它没有居中在圆圈中。

以下是我的做法：

<html>
<head>
    <style>
    .circle {
        border-radius: 1000%;
        width: 40px;
        height: 40px; 
        background: green;
    }
    </style>
</head>
<body>
    <a href="#" class="circle">Test test test test</a>
</body>
</html>

- user866364

4个回答

1

通过使用 padding，您可以使圆形比链接稍微大一点。

#circle {
    border-radius: 1000%;
    padding:50px;/* this instead of a set width and height just change this to change how much bigger the circle is than the link*/
    background:black;
    text-align:center;
    vertical-align:center;
}

- akaBase

0

你可以在链接周围放上一个 div 并使链接居中。

<div class="circle">
<center><a href="[link address]">[link name]</a></center>
</div>


.circle {
border: 2px solid red;
border-radius: 25px;
width: 10%;
height: auto;
margin-left: auto;
margin-right: auto;
}

http://jsfiddle.net/yg25us3k/

- adanot

3

中心标签？我们现在是在90年代吗？;-) （说明：中心标签是一种在HTML中用于居中元素的标记，原句使用了一种幽默的方式表达对其过时的看法） - HaukurHaf

0

这是可能的，但您必须将框大小设置为与文本长度匹配，尝试这样做：

.circle {
    border-radius: 1000%;
    width: 40px;
    height: 40px; 
    background: green;
    display:inline-block;
    line-height:40px;
    vertical-align:center;
    text-align:center;
    color:#ffffff;
}


<body>
    <a href="#" class="circle">Test </a>
</body>

在 jsfiddle 上尝试：http://jsfiddle.net/prt4y7b2/

- ClemSndr

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- HaukurHaf · Accepted Answer

您的代码问题在于 a 元素是内联元素，因此不接受高度属性。将其改为块级元素以指定高度：

问题出在你的代码中标签是一种内联元素，因此无法设置高度属性。需要将它改为块级元素以便于指定高度：

.circle {
    border-radius: 100%;        
    background: green;
    display:inline-block;
    line-height:100px;
}

要让文本居中显示，请使用line-height而不是height。

工作示例：

http://jsfiddle.net/7qfbopqj/