मैं एक div में क्षैतिज रूप से कई घूर्णन अवधि तत्वों को कैसे केंद्र करूं? - html, सीएसएस

मैं चारों ओर से कोड स्निपेट के साथ खेल रहा था https://codepen.io/amritleone/pen/qERPmW। डिस्क्लेमर: मैंने स्टैन्गओवरफ्लो पर स्पैन केंद्रित करने के बारे में सवाल पढ़े हैं लेकिन यह मामला थोड़ा अलग है। स्पैन तत्व एनीमेशन में फीका के साथ घूम रहे हैं।

एचटीएमएल यहाँ है।

<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 है। मैंने div और डिस्प्ले के लिए टेक्स्ट-एलाइन का इस्तेमाल किया: स्पैन के लिए इनलाइन-ब्लॉक। हालाँकि, स्पान ऐसा लगता है कि वे केंद्र में नहीं बल्कि केंद्र से शुरू होने वाले बिंदु से संरेखित हैं। मैंने दृश्य संदर्भ के लिए एक चित्र शामिल किया है।

मधुमक्खी केंद्र में नहीं है। मैं अंग्रेजी के साथ बहुत स्पष्ट नहीं हूं, लेकिन कृपया मुझसे पूछें कि क्या मेरा विवरण पर्याप्त नहीं है।

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

उत्तर:

शायद एक शुरुआत के लिए, मैं "को दूर करता हूं position: absolute; से ही .fadeIn span{}