如何在div中水平居中多个旋转跨度元素？

Question

我正在玩https://codepen.io/amritleone/pen/qERPmW的代码段。免责声明：我已经阅读了有关居中跨度的stackoverflow问题，但这种情况略有不同。 span元素以淡入淡出的动画旋转。

这是HTML。

<div class="container">
 <h1>A Community of</h1>
 <div class="fadeIn">
  <span>Aardvark</span>
  <span>Bee</span>
  <span>Caterpillar</span>
  <span>Doggo</span>
  <span>Elephant</span>
 </div>
</div>

到目前为止，这是CSS。 我使用了text-align for div和display：inline-block for span。然而，跨度看起来似乎不是在中心对齐，而是从中心开始。 我已经包含了一张图片供视觉参考。

蜜蜂不在中心。我对英语不是很清楚，但请问我的描述是否不够清楚。

.fadeIn{
line-height: 30px;
text-align: center;
}
.fadeIn span{
animation: fadeEffect 12.5s linear infinite 0s;
-ms-animation: fadeEffect 12.5s linear infinite 0s;
-webkit-animation: fadeEffect 12.5s linear infinite 0s;
font-family: ubuntu;
font-size: 25px;
opacity: 0;
display: inline-block;
overflow: hidden;
position: absolute;
}

/*FadeIn Animation*/
@-moz-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(0px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(0px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(0px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
} 
.container{
height: 100px;
}

Answer 1

也许首先，我要从position: absolute;

中删除.fadeIn span{}