html - Bootstrap Glyph 与圆形边框稍微偏离中心对齐

Question

以下代码使用 bootstrap 字形和 50% 的边框半径在圆圈中显示图标。然而，尽管设置了 text-align 属性，但图标并不是完全居中(稍微偏左)。这是为什么？

<div class="glyphicon-ring white-ring"> 
    <span class="glyphicon glyphicon-chevron-down glyphicon-bordered" style="color:white"></span>
</div>

CSS:

   .glyphicon-ring {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      border: 6px solid #54534A;
      color: #54534A;
      display: inline-table;
      text-align: center;
      font-size: 40pt;
    }

JSFiddle

Answer 1

你应该在 span 样式中添加 line-height; & 在 div 中添加 margin 如下所示

.glyphicon-ring {
display:inline-block;
position:relative;
margin:0 auto 0 auto;
border: 6px solid #54534A;
color: #54534A;
border-radius:50%;
text-align:center;
width: 90px;
height: 90px;
font-size:40pt;
}

跨度样式是:

<div class="glyphicon-ring white-ring"> 
<span class="glyphicon glyphicon-chevron-down glyphicon-bordered" style="margin:0; line-height:77px; text-align: center;"></span>