Bootstrap字形从圆形边界略微偏离中心

Question

以下代码使用引导图形和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

你应该跨度风格的div添加line-height; & 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> 

Answer 2

line-height: 90px;上.glyphicon用途：

.glyphicon{ 
    line-height: 90px; 
    vertical-align: middle; /* To insure vertical align */ 
} 

PS：图标仍然要看看略低位于左侧到期的图标宽度。在这种情况下，您可以使用.glyphicon类中的transform:translateX(2px);来修复它。