html circle around a text

Question

Is there a CSS way to create a circle around a text. My text is just a "+" sign and im trying to create a circle around it. I tried the bootstrap badge but thats oval.

Any ideas?

Thanks.

Answer 1

Here's what we did in one of our apps, hope it's helpful.

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

Here's the Codepen: http://codepen.io/SaraChicaD/pen/zKYaoO

Answer 2

Try this one

HTML

<label>+</label>

CSS

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

http://jsfiddle.net/XBc2M/

Just adjust the padding depending to you need

Answer 3

Here is the 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;
}