0

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

通常用圆圈填充整个 div，我还将圆圈的font-sizeand设置line-height为 20px，但由于 div 的 4px 现在被边框占用，我将 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;
}

在此处输入图像描述

4

2 回答 2

5

你寻找的输出看起来像这样吗？试着检查一下这个小提琴，如果你还需要更多更改，请告诉我。 

 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>

于 2016-10-07T03:04:54.660 回答
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：

（请注意，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: "\002B24";
}
<div>&#11044;</div>

于 2016-10-07T03:16:06.803 回答