How can I center an anchor tag in the middle of the screen using Tailwind?

It's frustrating that I can't seem to find a solution to my current issue.

I intended for this anchor tag to be centered on the screen, however, it stubbornly remains stuck to the left side.

<div class="background">
  <Navbar/>
    <p class="text-center text-6xl text-white pt-32 pb-20">Please describe what happened and send an email to :</p>
    <a class="text-center text-[64px] text-[#0066CC] font-bold font-['Inter']" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="334756404773475640471d505c5e">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="027667717642766771762c616d6f">[email protected]</a></a> </div>)}

The p tag appears perfectly centered in the middle while the anchor tag doesn't align as expected.

What could be causing this discrepancy?

csstailwind-css

Answer №1

Understanding the issue

The default setting for anchor tag a is display: inline, while paragraph tag p is set to display: block.

It's important to note that margins do not work on inline elements.

A quick (but not recommended) solution

To address this, you can add the class block to the elements like so:

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

However, please be aware that adding the block class will make the anchor tag fill the available horizontal space, which may not always be desired. You can see an example here.

https://i.sstatic.net/QnkEx.png

A more optimal solution

To resolve this issue in a better way, I suggest wrapping the anchor tag within a paragraph element:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhance your figures with a unique Javascript magnifying tool that works seamlessly across all browsers

After searching the web for magnifying glasses, I found that most only work for one picture. So, I took matters into my own hands and created a magnifying glass that can magnify all pictures within a specific div. It functions perfectly on Chrome browser b ...

javascriptjquerycss

Having difficulty in animating the upward movement of textbox2

I've got a form that contains 2 buttons and 2 textareas. When the form loads, I want to display only section1 (button, textarea) and the section2 button. Upon clicking the section2 button, my aim is to hide the section1 textarea, reveal the section2 t ...

javascripthtmlcsscss-animations

When in focus, the input element obscures the button

When I click the input element with a button, it covers the button. Can you help me fix this issue? .btn-search { width: 200px; padding: 10px; border-radius: 50px; position: fixed; margin-left: -100px; display: inline-block; vertical-align ...

htmlcssbootstrap-4

Tips for accurately placing a border on an active link using active_link_to in Rails 4

Currently, I am utilizing active_link_to to monitor changes in the state of my navigation bar links. Upon adding styling to the active state, the appearance resembles the image depicted below. My aim is to shift the border of the active state towards the t ...

cssruby-on-railsrubyruby-on-rails-4bootstrap-4

CSS- Creating a left-aligned child menu

Hello everyone, my objective is to expand the child menu towards the left side instead of the default right side placement. Below is the CSS code for achieving this, /*<![CDATA[*/ /* page styling, unimportant for the menu. only makes the page look ...

htmlcssmenuhtml-lists

Random image generator using jQuery on the home page body

Hey guys, I'm working on a cool feature for my Wordpress site where a random background image loads every time the homepage is refreshed. Check out the code snippets below: First, here's what I have in my style sheet (style.css): body.home { ...

phpjqueryhtmlcsswordpress

What CSS style should be used to fill both the thumbs up and thumbs down icons of a glyphicon?

Using glyphicon icons instead of other icons (fa icons), I am able to change the color of the icon, but it does not completely fill the icon with color like Facebook's like button. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1 ...

htmlcsstwitter-bootstrap-3

I encountered a limitation in utilizing opacity with my background-image

I have been struggling to apply opacity to my background image while still being able to see and write text on it. I have tried various methods but either the text is visible without the ability to write on it, or only half the screen is covered with the b ...

htmlcss

When I switch to a different navigation system, the css class gets removed

Let me clarify what I am looking for: Upon entering the index.php page, LINK_1 button is active. When I switch to LINK_2, it becomes active. I have only one index.php page where I include parts of external pages using PHP. Page_1 https://i.sstatic.net/Yv ...

javascriptphphtmlcss

While testing my Bootstrap 3 website, I noticed that the hamburger menu was functioning correctly with the local file. However, once I hosted the site on GitHub Pages, the navbar stopped working

I recently created a test site using Bootstrap 3 (). Strangely, the hamburger menu doesn't seem to be working on this site. However, when I open the local file, the hamburger menu functions properly. Can anyone provide any insights or solutions regard ...

javascripthtmljquerycsstwitter-bootstrap

What is causing an empty box to appear due to padding? Is there a way to conceal it

There seems to be an issue with adding padding to the results id div box. The padding is causing a blank yellow box to appear at the bottom before any results are submitted. I've tried to hide this box without success by adding a displayResult() funct ...

javascripthtmlcss

Separating Main Page Content from Sidebar for Independent Scrolling

In the layout of our website, there is a narrow column on the left containing menu options, while the right side is occupied by the main page content. The challenge I am facing is figuring out how to ensure that the page content can scroll independently ...

javascriptjqueryhtmlcsswebforms

Looking for assistance with CSS coding for an XML table

Struggling with styling an XML file into a table using CSS. Despite multiple attempts, I just can't seem to achieve the desired look. Provided below is my XML code. Seeking assistance from anyone who can offer a solution to this perplexing issue. &l ...

cssxmlcss-tables

Arrangement of divs on a stretched background

Seeking assistance to code a layout using div layers that resembles the design in this sample: The concept involves dividing the background into 4 distinct sections with content placed centrally. The upper part will feature a main banner image over pink a ...

htmlcss

Having trouble getting my Leaflet map to display even after meticulously following the quick-start guide

I am experiencing an issue where the map is not displaying at all, leaving a blank space where it should be. Despite following Leaflet's quick-start guide, I have been unable to determine the cause of this problem. Here is the code that I currently h ...

javascripthtmlcssleaflet

Cracking the Code of Website Design

One of my current educational activities involves delving into the code behind a specific website to understand its structure and functionality. I am particularly interested in a social media section within the site header that is enclosed in a <div> ...

htmlcss

My Bootstrap navbar seems to be malfunctioning. I'm wondering if there could be an issue with

here is a snippet of the code I'm working on: <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top"> <div class="container-fluid"> <a class="navbar-brand" href="#"> <img src="https://i.stack.imgur.com/5XeYV.png" ...

jqueryhtmlcssbootstrap-4

The Bootstrap responsive form is experiencing issues with properly displaying columns

I have implemented a simple bootstrap form with rows and columns in groups of 4. My goal was to create 3 total columns using this layout. Here is the code snippet: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" c ...

htmlcssbootstrap-4

The height of the div container exceeds 100% stretch

I am trying to incorporate a scrollbar for a specific div container. Here is the current code snippet that I have: $(document).ready(() => { for (let i = 0; i < 100; i++) { const newDiv = (`<div>Log Item</div>`); $("#logsCont ...

javascripthtmlcss

Prevent the cursor from exiting the div element when the tab key is pressed

Currently, I have implemented a search input box allowing users to either enter a value or select from a list of suggestions. The issue arises when the user selects an option using the tab key, as it causes the cursor to move outside the input box despite ...

cssreactjs