顺风 - 在文本居中的标记中左侧的位置图标答案

【问题标题】：tailwind - position icon left within a tag where text is centered顺风 - 在文本居中的标记中左侧的位置图标
【发布时间】：2021-12-17 06:53:54
【问题描述】：

我正在尝试将图标放置在链接的左侧，同时让文本居中。

<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>

这样，图标位于文本的中间。我可以在左边距的情况下向右推，但它不是动态的。知道如何将图标推到左侧并保持动态吗？

【问题讨论】：

标签： html css flexbox tailwind-css

【解决方案1】：

试试这个方法：

<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

【讨论】：