Tailwind align anchor tag to center of screen?

user_14645819 0
Viewed 87

unfortunately i cant find a solution for my problem.

I want this anchor tag to be in the center of the screen, but the anchor tag is sticking to the left side.

<div class="background">
  <Navbar/>
    <p class="text-center text-6xl text-white pt-32 pb-20">Describe what happended and send an email to :</p>
    <a class="text-center text-[64px] text-[#0066CC] font-bold font-['Inter']" href="mailto:test@test.com">test@test.com</a> </div>)}

The p tag is centered perfectly to the middle but the anchor tag isnt?

What is the issue?

tailwind-css css
1 Answers

Why this happens

Anchor tag a is display: inline by default. Paragraph tag p is display: block by default.

Margins are not supported on inline elements.

Quick (bad) fix

Add block to classes

<p class="text-center">test</p>
<a class="block text-center">test</a>

NOTE: the anchor tag will fill the available horizontal space. Hence the space to the left and right of the link will behave as a link. This might not be desireable. See this example

Example of the problem

The better solution

I recommend wrapping the anchor in a paragraph instead:

<p class="text-center">test</p>
<p class="text-center">
  <a href="#">test</a>
</p>
user_33309810
Related