完美居中带有边框和框大小的元素内容

Question

我使用 html 实体 ⬤ 设置了一个圆形 div，里面有一个圆圈，div 的宽度和高度为 20px，边框为 2px，box-sizing: border-box 停止大小增加。

通常要用圆填充整个 div 我也会将圆的 font-size 和 line-height 设置为 20px，但是由于 div 的 4px 是现在开始处理边框，我将行高设置为 16px。这说明了垂直居中，但水平居中仍然关闭。

怎样才能完美居中？

 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:"[=10=]2B24";
   cursor: pointer;
   box-sizing: border-box;
}

Answer 1

您要查找的输出是否像这样，请尝试检查一下 fiddle 如果您还需要更多更改，请告诉我。

 div {
   border: 2px solid #C15649;
   width:20px;
   height:20px;
   position: relative;
   top:0;
   margin:0;
   padding:0;
   left:0;
   z-index: 1;
   text-align: center;
   color:black;
   border-radius: 50%;
   cursor: pointer;
   box-sizing: border-box;
}
div:before{
 position: absolute;
 content:"";
 top:0;
 bottom:0;
 background:black;
 border-radius:50%;
 left:0;
 right:0;
 margin:auto;
 width:100%;
 height:100%;
}

<div>
</div>

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: "[=10=]2B24";
  cursor: pointer;
  display: block;
  position: relative;
  left: -3px;
  top: -2px;
  box-sizing: border-box;
}

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

选项 2:

如果您想要字符的边框，可以使用 text-shadow：

（请注意 text-shadow 仅在 IE 10+ 中受支持）

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: "[=12=]2B24";
}

<div>&#11044;</div>

完美居中带有边框和框大小的元素内容

Perfectly center content of element with border and box-sizing

html

css

border-box

centering