字体超赞的加载未居中

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/