tailwind - position icon left within a tag where text is centered

user_11266889 0
Viewed 769

I am trying to position icon to the left side of a Link and have 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>

With this the icon is in the middle with the text. I can push to the right with margin left but then it is not dynamic. Any idea how I can push the icon to the left and it remains dynamic?

flexbox tailwind-css css html
1 Answers

Try this way:

<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 long text</p>
  <div class="flex-1"></div>
</div>

Demo

user_106987410
Related