Centering text issues?
Kentakoong opened this issue · comments
Wongkraiwich Chuenchomphu commented
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!
Nishil Shah commented
Also having this exact issue.
Nishil Shah commented
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.
Wongkraiwich Chuenchomphu commented
Thanks!