使用Tailwind CSS时SVG图标与文字居中失效，自定义CSS也未生效

问题原因 #

• 父级a标签使用inline-block布局，配置的justify-center属性仅在Flex/Grid布局下生效，属于无效配置
• SVG默认为行内元素，遵循文本基线对齐规则，无法自动居中对齐
• 补充：原代码中div标签的calss为拼写错误，正确应为class

修复方案 #

方案1：最小修改量（保留原有inline-block布局） #

仅给SVG标签添加block mx-auto类，让SVG转为块级元素且水平居中，即可实现对齐效果。其中mb-1为可选配置，用来调整图标和文字的上下间距，可根据实际视觉效果修改数值。修改后的SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 block mx-auto mb-1" 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>

方案2：使用Flex布局（更易扩展后续样式） #

修改a标签的布局类型为纵向弹性布局，直接让所有子元素自动居中对齐，完整修改后代码：

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" rel="stylesheet"/>
<div id="tab" class="bg-gray-500">
  <a href="#" class="bg-gray-100 w-full focus:text-teal-500 hover:text-teal-500 flex flex-col items-center text-center pt-2 pb-1">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mb-1" 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="text-xs">Home</span>
  </a>
</div>

两种方案都可以实现图标与下方文字的居中对齐效果，可根据实际业务场景选择。

内容的提问来源于stack exchange，提问作者raqibnur