如何在div中將多個旋轉跨度元素水平居中？

Question

我正在玩https://codepen.io/amritleone/pen/qERPmW中的代碼片段。 免責聲明：我已經閱讀了有關居中跨度的stackoverflow問題，但這種情況略有不同。 跨度元素隨着動畫中的淡入淡出而旋轉。

這是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用於div和display：inline-block用於跨度。 但是，跨度似乎不是對齊在中心，而是從中心開始對齊。 我已附上一張圖片供視覺參考。

蜜蜂不在中心。我不太會說英語，但是請問我的描述不夠清楚。

.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{}