Alignment
I am having hard time aligning this on the same line. Please, can anyone help me?
14 Replies
Can you please share a codepen? There's not much to go on to help here.
alright
I think the problem has to do with tailwind or something
this is the code in tailwind css
It is unlikely that this is a tailwind css issue. The codepen doesn't have any fonts selected which mean that the browser default is used also the tailwind template has not been used.
But it looks like it is a font issue rather than a tailwind issue. Special characters are treated differently based on how the font designer created them. They can have what look like different baselines to other characters. You might have to isolate the '@' character to adjust its alignment seperately.
oKay thanks a lot for the feedbacj
You are right mate
I removed the font setting and this is what i got
so how can I resolve this behavior and what do you mean by isolating the '@' character
You could have the '@' character in a nested span allowing you to control it line positioning independently of the other text but this becomes harder to manage over time.
I figured it out. Thanks so much
I used align middle and that works.
🙂 Please mark this thread as solved.
how does that change become harder to manage
You'll need specific html/css for each time you want to use a special character. Doing that once in the html is easy but each time you'd have have to repeat this pattern. Now imagine if you have more devs on the project or more pages where you need this pattern. Over time you incur a technical debt because of this decision. If you change fonts you'll have to find all places where you use this pattern to see if it was impacted by the font change.
Insightful!
Thanks a lot mate. Your guidance has really been helpful