Centering text issues?

[Kentakoong]

I tried to set the text as center, the words isn't the same length. So it's bugging out like this :

This is my code right now.

<TextLoop delay="500" fade="false">
                  <p className="text-5xl lg:text-7xl bg-gradient-to-b text-transparent bg-clip-text from-om-green-600 to-om-green-50 pb-4">Education</p>
                  <p className="text-5xl lg:text-7xl bg-gradient-to-b text-transparent bg-clip-text from-om-green-600 to-om-green-50 pb-4">Proficiency</p>
                  <p className="text-5xl lg:text-7xl bg-gradient-to-b text-transparent bg-clip-text from-om-green-600 to-om-green-50 pb-4">Ingenuity</p>
                  <p className="text-5xl lg:text-7xl bg-gradient-to-b text-transparent bg-clip-text from-om-green-600 to-om-green-50 pb-4">Competance</p>
                  <p className="text-5xl lg:text-7xl bg-gradient-to-b text-transparent bg-clip-text from-om-green-600 to-om-green-50 pb-4">Literacy</p>
                </TextLoop>

// fyi : the text center is in the top div

Hope I could get any helps, thanks!

[nishilshah17]

Also having this exact issue.

[nishilshah17]

Figured it out, you need to make sure the component containing the text is the same width. So, wrap the text in a div, give it some width and center the text in the div.

[Kentakoong]

Thanks!