围绕超链接的 CSS 圆圈答案

【问题标题】：CSS Circle around a hyperlink围绕超链接的 CSS 圆圈
【发布时间】：2014-10-02 21:56:39
【问题描述】：

是否可以使用 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>

【问题讨论】：

标签： html css

【解决方案1】：

您的代码的问题是a 元素是一个内联元素，因此不接受任何高度。将其更改为块级元素以赋予其指定的高度：

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

要让文本出现在中间，请使用line-height 而不是height。

工作样本：

http://jsfiddle.net/7qfbopqj/

【讨论】：

我们不能总是迎合旧版浏览器。恕我直言，旧版浏览器错过了圆角之类的装饰性内容，这完全没问题。
我将在后端渲染这段代码并从 html 创建一个图像。完美，伙计。
帮了我大哥！！谢谢

【解决方案2】：

通过使用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;
}

【讨论】：

【解决方案3】：

这是可能的，但您必须设置框大小以匹配您的文本长度，试试这个：

.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/

【讨论】：

【解决方案4】：

您可以在链接周围放置一个 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/

【讨论】：

中心标签？ 1990 年代的我们在哪里？ ;-)