字體超贊的加載未居中

Question

我在加載通知中使用的是font-awesome，但令我感到瘋狂的是，由於偏移很小，導致旋轉產生“擺動”

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不是正方形，但是如果我嘗試將height，width設置為靜態像素，只會變得更糟...想法？

Answer 1

正如您自己說的那樣， div不是方形的，因此旋轉時會給您一些“擺動”。 將line-height （而不是height ）和width屬性設置為相等的值，並將text-align設置為center ，這樣可以使您的工作變得更加順暢。

如果仍然有輕微的“擺動”，則可能只是瀏覽器中的渲染問題。 我認為Font Awesome已優化為以14px或其倍數顯示，因此請嘗試將font-size為196px 。

這是更新的小提琴，其中包含2個動畫，第一個設置了尺寸，第二個設置了font-size減小了font-size 。

這是具有與“修復”相關的屬性的摘錄：

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

Answer 2

要水平居中，請使用以下代碼（相關CSS）：

.stripes{
    text-align: center;
}

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

內容： https ://jsfiddle.net/lmgonzalves/69x2j60j/1/