html围绕文本圈

Question

是否有CSS方法在文本周围创建圆圈。我的文字只是一个“+”符号，我试图围绕它创建一个圆圈。我试过了自举徽章，但那是椭圆形的。

有什么想法吗？

感谢。

Answer 1

以下是fiddle

<span>+</span>

span {
    display: block;
    height: 30px;
    width: 30px;
    line-height: 30px;

    -moz-border-radius: 30px;
    border-radius: 30px;

    background-color: grey;
    color: white;
    text-align: center;
    font-size: 2em;
}

Answer 2

试试这个

HTML

<label>+</label>

CSS

label{
    padding: 4px 9px; 
    background: #dddddd;
    width: 1px;
    border-radius: 45%;
}

http://jsfiddle.net/XBc2M/

根据需要调整填充

Answer 3

以下是我们在其中一个应用中所做的，希望它有所帮助。

.circle {
   display: inline-block;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   color: white;
   background-color: red;
   text-align: center;
   font-weight: bold;
   vertical-align: middle;
   line-height: 20px;
 }

<div class="circle">+</div>

这是Codepen：http://codepen.io/SaraChicaD/pen/zKYaoO