完美地将元素的内容与边框和框大小相关联

Question

我使用html实体设置了一个带圆圈的圆形div，div为20px宽和高，并且有一个2px边框和box-sizing: border-box来阻止大小增加。

通常用圆圈填充整个div我也将圆圈font-size和line-height设置为20px，但是因为4px的div现在被占用border我将line-height设置为16px。这占垂直居中，但水平居中仍然是关闭。

如何完美居中？

https://jsfiddle.net/3drve2xn/

 div{
   border: 2px solid #C15649;
   line-height:16px;
   font-size:20px;
   width:20px;
   height:20px;
   position: absolute;
   top:0;
   margin:0;
   padding:0;
   left:0;
   z-index: 1;
   text-align: center;
   color:black;
   border-radius: 50%;
   content:"\002B24";
   cursor: pointer;
   box-sizing: border-box;
}

Answer 1

您查找的输出看起来像这样尝试检查这个小提琴，让我知道您是否还需要更多更改。

question1

table2

Answer 2

我不认为在字符周围设置边框在CSS中是完全可能的，因为它在很大程度上取决于字符和字体

所以这里有你的选择AFAIK：

选项1 ：

这是一个不那么好的选项 - 将字符包装在另一个元素中并将边框放到外部元素中。调整您给出的字体大小的边框。

以下是一个例子：

div {
  border: 2px solid #C15649;
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  left: 0;
  z-index: 1;
  text-align: center;
  color: black;
  border-radius: 50%;
  box-sizing: border-box;
}
div span {
  line-height: 46px;
  font-size: 50px;
  width: 50px;
  height: 50px;
  content: "\002B24";
  cursor: pointer;
  display: block;
  position: relative;
  left: -3px;
  top: -2px;
  box-sizing: border-box;
}

<div>
  <span>&#11044;</span>
</div>

选项2 ：

如果角色的边框符合您的要求，您可以使用text-shadow：

（请注意，IE 10+仅支持text-shadow）

div {
  /*border: 2px solid #C15649;*/
  text-shadow: -2px 0 red, 0 2px red, 2px 0 red, 0 -2px red;
  font-size: 50px;
  color: black;
  content: "\002B24";
}

<div>&#11044;</div>