如何使用 CSS 将“加号”符号完美居中

Question

如何使用 CSS 在圆圈内水平和垂直居中加号？ 这是我的代码：

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

这是一个jsfiddle：

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

当我在 Mac 上查看这是Chrome 46.0.2490.86 (64-bit)时，加号看起来没有垂直对齐。 它比顶部更接近圆圈的底部。 这是我在小提琴中看到的屏幕截图：

我认为这将是直截了当的，但这让我发疯了。 知道如何垂直对齐加号吗？

请注意 Bootstrap css 包含在小提琴中，因为我在我的项目中使用它。 如果我从小提琴中删除 Bootstrap，加号似乎更接近垂直居中。

Answer 1

这是完美主义者的正确解决方案。

顺便说一句。 这里有改进的外观 ： https ： //jsfiddle.net/mzvarik/wt3upz4q/

基本：

 .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 

Answer 2

普通+字符的排列方式与任何非大写字母的排列方式相同，即从中间位置稍低一些。 使用例如'a'与'A'时，您可以看到差异。 因此，使用“全宽加”字符（U + FF0B）而不是正常字符可以解决垂直对齐问题。 我还使用flexbox轻松对齐角色中心。

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

Answer 3

为什么不使用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> 

Answer 4

我结束了这个：

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

使用以下CSS：

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

.container span {
    position: absolute;
    top: -7px;
    left: 2px;
}

Answer 5

您可以使用弹性框在圆圈内居中对齐内容。

例如： https ： //jsfiddle.net/Wijmo5/8eb9va16

这是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)
}

以下是如何使用它：

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

Answer 6

我有一个非常相似的问题。 我最终做的并且对我有用的是：

line-height: 100%; 

我会测试你的line-height改变为100％，看它是否有效。 您可能需要添加固定高度。

非常简单的修复解决了我的问题。

Answer 7

注意：您可以使用其他成员提到的 SVG。 但是，我必须设计一个 wordpress 主题，所以必须想出以下解决方案！

在 span justify-content-center上使用display-flex并使用line-height的值在按钮、span 或任何其他标签内垂直定位加号或减号。 line-height 值的增加会使符号向下移动，而 line-height 值的减小会使符号向上移动。

看起来如果您根本不更改字体大小，则使 line-height 等于容器的高度会完美对齐加号，如下所示。 但是，如果您更改 font-size，您可以使用 line-height 使其垂直对齐，以满足您的需求。

这个答案基于相关 css 属性的实际行为，以在增加字体大小（到任何程度）后实现按钮和跨度内减号和加号的垂直对齐（我相信它也适用于其他元素）使用的字体系列。

用例：有时你想要更大的按钮，里面有加号或减号。 但是字体大小对于按钮来说太小了。 当您增加按钮的字体大小时，加号和减号无法像我一样垂直对齐。 那时我想出了以下解决方案。

注意：我在其他任何地方都找不到解决方案，所以我最终得到了这个解决方案。 我对您对解决方案的任何看法持开放态度，因此请随时发表评论:)

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

Answer 8

那么➕表情符号呢？

tailwindcss 中的示例：

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

如果您想要自定义颜色中的加号，只需使用 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>

工作解决方案： https://play.tailwindcss.com/WkFd1E38ho

Answer 9

像这样做：

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

然后调整top和left值，直到您满意为止。