19

How can I use CSS to center a plus sign horizontally and vertically within a circle? Here's my code:

#container {
  font-size: 20px;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid black;
  line-height: 16px;
  text-align: center;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
<span id="container">+</span>

Here's a jsfiddle:

http://jsfiddle.net/flyingL123/on44a0xq/

When I view this is Chrome 46.0.2490.86 (64-bit) on a Mac, the plus sign does not look vertically aligned. It's much closer to the bottom of the circle than the top. Here's a screenshot of what I see in the fiddle:

enter image description here

I thought this was going to be straight forward, but it's driving me nuts. Any idea how to align the plus sign vertically?

Please note Bootstrap css is included in the fiddle because I'm using it in my project. If I remove Bootstrap from the fiddle, it seems like the plus sign moves closer to vertically centered.

4
  • 6
    Why not just use a proper character? In other words, U+2295, ᴄɪʀᴄʟᴇᴅ ᴘʟᴜs “⊕”. Nov 17, 2015 at 20:37
  • Adjusting the line-height to 18px worked for me - testing in Chrome and IE Nov 17, 2015 at 20:43
  • Does it align properly if you reduce the font size to 16px? Maybe it handles the case where the line height is less than the font height differently.
    – roeland
    Nov 17, 2015 at 20:49
  • W7-x32 Chrome 46+ FF44+ work fine as-is, but in IE11+ both top and left are -1px off center. Nov 17, 2015 at 22:40

9 Answers 9

23

This is the proper solution of a perfectionist.

Btw. here is fiddle with improved looks: https://jsfiddle.net/mzvarik/wt3upz4q/

Basics:

.circle{
  border:1px solid #000;
  width:20px;
  height:20px;
  border-radius:100%;
  position:relative;
  margin:4px;
  display:inline-block;
  vertical-align:middle;
}
.circle.plus:before,
.circle.plus:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:green;
}
.circle.plus:before{
    width: 2px;
    margin: 2px auto;
}
.circle.plus:after{
    margin: auto 2px;
    height: 2px;
}

/* and a bonus!!! minus :-) */
.circle.minus:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:red;
    margin: auto 2px;
    height: 2px;
}
<h3>Perfect circle in a perfect world!</h3>

<span class="circle plus"></span> Plus

<span class="circle minus"></span> Minus

2
  • 1
    That's the solution I usually implement. I prefer it as neither additional markup nor background images are needed. Well done.
    – yodabar
    May 4, 2020 at 9:16
  • 2
    I took that fiddle and made the size more dynamic as I need a big + button. And also ditched the shadows. jsfiddle.net/aeobtwLj
    – Griffin
    Oct 5, 2021 at 21:20
18

The normal + character aligns the same way as any non-capital letter would do, i.e. a bit lower from the middle-line. You can see the difference when using e.g. 'a' vs 'A'. So using a "full width plus" character (U+FF0B) instead of the normal one solves the vertical alignment. I also use flexbox to easily align the character center-center.

Image displaying center alignment

#wrap {
  display: flex;
  align-items: center;
  margin: 10px;
}
.icon:before {
  content: '';
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid black;
  font-size: 30px;
  color: black;
}
#a:before {
  content: 'a';
}
#A:before {
  content: 'A';
}
#plus:before {
  content: '+';
}
#bigplus:before {
  content: '\FF0B';
}
<div id="wrap">
  <div class="icon" id="a"></div>
  <div class="icon" id="A"></div>
  <div class="icon" id="plus"></div>
  <div class="icon" id="bigplus"></div>
</div>

1
  • 3
    Weirdly enough, on my machine (Win10, Chrome 86), I get the opposite. Full width is not centered and the other is. Suppose it depends on the font.
    – MrVoodoo
    Nov 9, 2020 at 15:13
7

Why not using a SVG?

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 52 52"><path d="M26 0C11.664 0 0 11.663 0 26s11.664 26 26 26 26-11.663 26-26S40.336 0 26 0zm0 50C12.767 50 2 39.233 2 26S12.767 2 26 2s24 10.767 24 24-10.767 24-24 24z"/><path d="M38.5 25H27V14c0-.553-.448-1-1-1s-1 .447-1 1v11H13.5c-.552 0-1 .447-1 1s.448 1 1 1H25v12c0 .553.448 1 1 1s1-.447 1-1V27h11.5c.552 0 1-.447 1-1s-.448-1-1-1z"/></svg>

1
  • 1
    Found this very useful. I think it is the clearest and simplest way. Jun 15, 2021 at 14:47
1

I ended up going with this:

<span class="container"><span>+</span></span>

With the following CSS:

.container {
    display: block;
    border: 2px solid white;
    border-radius: 50%;
    height: 20px;
    width: 20px;
}

.container span {
    position: absolute;
    top: -7px;
    left: 2px;
}
1
  • 2
    It depends of the font and its size.
    – Takit Isy
    Jul 25, 2018 at 20:01
1

You can use a flex-box to center-align the content in within the circle.

For example: https://jsfiddle.net/Wijmo5/8eb9va16

Here's the CSS:

.circle-char {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  padding: 1px;
  border: 1.5px solid;
  border-radius: 50%;
  cursor: pointer;
  font-weight: bold;
}
.circle-char:hover {
  background: rgba(0, 0, 0, .1)
}

And here's how to use it:

<p>
  Hello, this is a circled plus:
  <span class="circle-char">
    &plus;
  </span> and a full-width plus:
  <span class="circle-char">
    &#xFF0B;
  </span> and here's a minus and a times:
  <span class="circle-char">
    &minus;
  </span>
  <span class="circle-char">
    &times;
  </span>.
</p>
1

I had a very similar issue. What I ended up doing and it worked for me was:

line-height: 100%; 

I would test changing your line-height to 100% and see if it works. You may need to add a fixed height though.

Very simple fix that solved my problem.

1

Notice: You can use SVG as mentioned by other members. However, I had to style a wordpress theme so had to come up with the following solution!

Use display-flex on the span justify-content-center and use the value of line-height to position the plus or minus sign vertically within the button, span or any other tag. Increase in line-height value moves the signs downward and and decrease in line-height value moves the signs upward.

It seems like if you don't change the font-size at all, giving line-height equal to the height of the container perfectly aligns the plus sign as demonstrated below. However, if you change the font-size you can play with the line-height to align it vertically to your satisfaction.

This answer is based on the practical behavior of concerned css properties to achieve vertical align of minus sign and plus sign inside button and span(I believe it works same for other elements as well) upon increasing the font-size(to any extent) regardless of font-family used.

Use Case: Sometimes you want bigger buttons with a plus or minus sign inside it. But the font-size is too small for the button. As you increase the font-size of the button, the plus and minus sign fails to align vertically as was the case with me. That's when I came up with the following solution.

Note: I could't find a solution anywhere else, so I ended up with this solution. I am open to any say you have on the solution so feel free to leave some comments:)

/* common style */
button {
   height: 50px;
   width: 200px;
   background: #216AFF;
   color: white;
}

.minus {
  font-size: 70px;
  display: flex;
  justify-content: center;
  line-height: 35px;
}

.plus {
  font-size: 50px;
  display: flex;
  justify-content: center;
  line-height: 45px;
}

#container {
  width: 100px;
  height: 100px;
  display: flex;
  background: red;
  border-radius: 50%;
  color: white;
  justify-content: center;
  line-height: 100px;
}
<button class="minus">-</button>
<br>
<button class="plus">+</button>
<br>
<span id="container">+</span>

1

And what about ➕ emoji?

enter image description here

Sample in tailwindcss:

<button class="flex justify-center items-center bg-green-600 
               text-6xl h-32 w-32 p-4 rounded-full">
➕
</button>

If you want the plus in your custom color, just use font-noto:

<button class="flex  justify-center items-center bg-green-600 
               text-6xl h-32 w-32 p-4 rounded-full
               font-noto text-red-600">
➕
</button>

Working solution: https://play.tailwindcss.com/WkFd1E38ho

-6

Do it like this:

<style>span{position:relative;top:-1px;left:-8px}</style>
+
<span>o</span>

And then tweak the top and left values until you are happy.

1
  • 4
    This is not good, because it differs in every browser/device. Jul 25, 2018 at 19:38

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.