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);來修復它。