顺风 css svg 图标文本中心不起作用答案

【问题标题】：tailwind css svg icon text center is not working顺风 css svg 图标文本中心不起作用
【发布时间】：2021-07-10 05:08:00
【问题描述】：

tailwind CSS SVG 图标文本中心不起作用，也尝试使用 CSS

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" rel="stylesheet"/>
<div id="tab" calss="bg-gray-500">
  <a href="#" class="bg-gray-100 w-full focus:text-teal-500 hover:text-teal-500 justify-center inline-block text-center pt-2 pb-1">

    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7   7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
  </svg>

    <span class="block text-xs">Home</span>
  </a>
</div>

【问题讨论】：

标签： svg tailwind-css

【解决方案1】：

试试这个，

示例 1

<div id="tab" class="bg-gray-100 w-full focus:text-teal-500 hover:text-teal-500 flex py-1 justify-center">
  <a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7   7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
    </svg>
    <span class="block text-xs">Home</span>
  </a>
</div>

<br />

示例 2

<div class="flex w-full justify-center">
  <div id="tab" class="bg-gray-100 w-10 h-10 focus:text-teal-500 hover:text-teal-500 flex py-1 justify-center">
    <a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7   7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
      </svg>
      <span class="block text-xs">Home</span>
    </a>
  </div>
</div>

顺风游乐场 sample

【讨论】：

第二个例子运行良好，谢谢

【解决方案2】：

这就是你想要的吗？然后你需要为容器添加items-center和flex而不是inline-block

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" rel="stylesheet" />
<div id="tab" calss="bg-gray-500">
  <a href="#" class="bg-gray-100 w-full focus:text-teal-500 hover:text-teal-500 justify-center items-center flex text-center pt-2 pb-1">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7   7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
    </svg>

    <span class="block text-xs">Home</span>
  </a>
</div>

【讨论】：