tailwind - 在文本居中的标记中左侧的位置图标

Question

我正在尝试将图标定位到 Link 的左侧，同时让文本居中。

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

有了这个，图标就在文字中间了。我可以用左边的边距向右推，但它不是动态的。知道如何将图标推到左侧并保持动态吗？

Answer 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

tailwind - 在文本居中的标记中左侧的位置图标

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

html

css

flexbox

tailwind-css