字體真棒負荷不集中

Question

我使用的字體真棒我的裝載通知，但它快把我逼瘋了，有隻是一個輕微的偏移導致旋轉有一個「擺動」

HTML

<div class="loading-div fa fa-cog fa-spin"></div> 

CSS

.loading-div{ 
    position: absolute; 
    z-index: 9999; 
    font-size: 200px; 
} 

https://jsfiddle.net/69x2j60j/

我注意到，它的包含div不是正方形，但如果我嘗試將高度，寬度設置爲靜態像素，它只會變得更糟......思考？

Answer 1

水平居中，用這個（相關CSS）：

.stripes{ 
    text-align: center; 
} 

.loading-div{ 
    display: inline-block; 
} 

FIDDLE：https://jsfiddle.net/lmgonzalves/69x2j60j/1/

Answer 2

正如你所說的自己，div不成方形所以這將會給你一點「擺動「，因爲它旋轉。將line-height（而不是height）和width屬性設置爲相等的值，並將text-align設置爲center，它應該爲您平滑一些事情。

如果你仍然有輕微的「搖擺」，那麼它可能只是在瀏覽器中的渲染問題。我相信，Font Awesome會優化顯示在14px或其倍數上，所以請嘗試將font-size減少爲196px。

Here是帶有2個動畫的更新小提琴，第一個是尺寸設置，第二個是尺寸設置和font-size縮小。

這裏與初步認識到了「修復」性質的摘錄：

.loading-div{ 
    font-size:196px; 
    line-height:200px; 
    text-align:center; 
    width:200px; 
}