place an icon on the left side of a tag in tailwind CSS while keeping text in the center

Is there a way to align an icon to the left side of a link while keeping the text centered at the same time?

<div className="max-w-screen-2xl mx-auto sm:px-6 lg:px-8">
  <Link
    href="#"
    className="px-6 py-3 mt-2 flex justify-center text-center"
  >
    <DocumentTextIcon
      className="ml-1 mt-1 -mr-1 h-10 w-10"
      aria-hidden="true"
    />
    <p>
    Some random text </p>
  </Link>
</div>

The current code centers both the icon and the text, but adjusting with margin might not be dynamic. Any suggestions on how to keep the icon aligned to the left and maintain dynamic functionality?

htmlcssflexboxtailwind-css

Answer №1

Here is a different approach to try:

<div class="my-10 flex items-center justify-center bg-gray-100 w-40">
  <div class="flex-1">
    <span class="mr-auto">icon</span>
  </div>
  <p>text</p>
  <div class="flex-1"></div>
</div>

<div class="my-10 flex items-center justify-center bg-gray-100 w-80">
  <div class="flex-1">
    <span class="mr-auto">icon</span>
  </div>
  <p>with lengthy content</p>
  <div class="flex-1"></div>
</div>

Check out the demo here

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

Having trouble getting CSS3 radial-gradient to work on Firefox?

Having trouble getting this radial gradient to display correctly in Firefox: background-image: -moz-radial-gradient(bottom center, 900px 900px, #7dd134 0%, #137f1e 90%, #137f1e 100%); ...

css

Is it possible to include two of these on a single page with unique variables? (Using JQuery)

I am looking to create two similar pages, each with different percentages. However, when I try modifying the JS or changing class/ID names, it keeps pulling data from the first SPAN element. http://jsfiddle.net/K62Ra/ <div class="container"> <di ...

javascriptjqueryhtmlcss

The Power of the CSS Universal Selector and Specificity

Currently exploring the puzzling scenario where .x seems to have higher specificity than *.x, despite expectations. Shouldn't *.x technically have a specificity of 0-0-1-1 (1 class, 1 tag) while .x is just one class with specificity 0-0-1-0? Let&apo ...

csscss-specificity

Expanding Gridview Width within a Container in ASP.Net: A Step-by-Step Guide

https://i.stack.imgur.com/ZaJE7.jpg After viewing the image above, I am facing a challenge with stretching and fixing a gridview to contain the entire div where it is placed. The issue arises when the gridview adjusts automatically based on the content&ap ...

javascriptc#jquerycssasp.net

Having trouble getting the onclick function to work in order to switch out the images

This is the HTML code that I used Here is the JavaScript code, but the onclick function seems to not be working ...

javascripthtmlonclick

The selection choices in the HTML <select> dropdown appear oversized on Chrome browsers

There has been a recent change in Chrome versions, likely in June 2017, that is causing options in a <select> input to appear much larger than in other browsers or older versions of Chrome. For instance, on some machines, the dropdown on this w3scho ...

htmlcssgoogle-chromehtml-selectchromium

Position the typography component to the right side

Is there a way to align two typography components on the same line, with one aligned to the left and the other to the right? I'm currently using this code but the components are aligned next to each other on the left side. const customStyles = makeSt ...

javascriptcssreactjsalignmentmaterial-ui

Ways to display scroll bar when hovering the mouse pointer?

When visiting the website YouTube, you may notice that their sidebar scrollbar becomes visible as soon as your mouse moves over it. I've been attempting to achieve this effect on my own div, but currently, the scrollbar only appears once I start scrol ...

javascriptcss

Ways to ensure a function is only triggered once using onmouseover

I'm fairly new to JavaScript and I've been attempting to create a function that only runs once. Here's the logo I've been trying to animate: <img src="img/logot2.png" id="logoutjs" onmouseover="move()" ...

javascripthtml

How can I create a pop-out message box in HTML similar to the style used in Gmail or OkC

As someone who isn't very experienced in client development, I hope you'll forgive me for asking what might be a simple question that can easily be solved with Firebug. I'm interested in learning how to create a feature like the OKCupid or G ...

javascripthtmlasp.net

Alignment dilemmas

I'm experimenting with HTML and CSS and have a query concerning the text-align properties. As I work on constructing my personal website, I aim to align text content to start while having it centered in the middle of the page. Currently, I've ma ...

htmlcssflexbox

What is the method for displaying the value of a textarea?

I am relatively new to the world of coding, but I have already delved into HTML, CSS, and basic DOM scripting. My goal is simple - I want to create a comment box where people can leave messages like in a guestbook. However, when I input text and click on ...

javascripthtmlcss

Maintain consistent grid proportions even when content overflows

I came across this issue: https://jsfiddle.net/w19hpqzx/ However, I'm aiming for a layout that resembles this: https://jsfiddle.net/4smwop2u/ Specifically, I'd like the yellow aside portion to stay visible on the screen and for the code block . ...

htmlcsscss-grid

Tips for modifying HTML elements using Javascript after a link is clicked

Imagine a scenario where there is a DIV called "videoplayer" containing an image within it. Is there a straightforward method to modify the HTML content inside this DIV when a link is clicked? For instance, the current content of the DIV is as follows: ...

javascriptjqueryhtmlcssajax

Tips for transferring an array between pug mixins?

My pug template features an array that I want to transfer to a mixin in order to populate JSON schema.org markup. Below is the code: profile.pug include ../components/bio-seo - var person = {} - person.title = "Name, title of person" - person.url = "ht ...

htmlarrayspuginterpolation

Utilize the design elements stored in the database within Django

I have a style stored in my database and I want to use it in a template, but I'm not sure how to do it. models.py class Post(models.Model): # ... body = models.TextField() # HTML style = models.TextField() # CSS # ... views.py ( ...

pythoncssdjango

What is the best way to incorporate a rectangle or arrow into my canvas design?

Looking for a way to enhance my html canvas wind direction code, here is how it currently looks: var x, y, r, ctx, radians; ctx = window.compass.getContext("2d"); radians = 0.0174533 * (10 - 90); x = ctx.canvas.width / 2; y = ctx.canvas.height / ...

javascripthtmlcanvas

Is it possible to save an HTML div as an image file?

Is there a way to save the output of an HTML div as an image using rmarkdown or R, possibly with a package like htmltools? For example: <div class="w3-container w3-teal"> <h1>My Header</h1> </div> ...

htmlcssr

Is there a way to make my website mirror the exact layout it has on Codepen?

Recently, I started working on a web project on Codepen using Bootstrap 4 and JQuery quick-adds. The results were perfect on Codepen but when I copied the same code to my text-editor and ran it from there, the formatting of the page was completely off. I t ...

jqueryhtmlcsstwitter-bootstrap

The command response.setHeader("Refresh", "0") failed to execute

My webpage needs to be refreshed when the user session has expired or the connection is not active. Despite trying various codes, I have been unsuccessful in achieving this. The last code snippet that I implemented is as follows: if(session.getAttribute(" ...

javahtmlservletshttprequest