使用 Tailwind CSS 将文本居中并将图标放在右侧答案

【问题标题】：Center Text and put Icon on the right with Tailwind CSS使用 Tailwind CSS 将文本居中并将图标放在右侧
【发布时间】：2021-09-22 14:14:41
【问题描述】：

我尝试使用 Tailwind CSS 构建侧边栏菜单。但我无法像 LI-tag 的文本一样将图标居中。


    <ul id="sidemenu" class="text-center border-b-2 border-gray-200">
      <li class="border-t-2 border-gray-200">
        <div href="#" class="block cursor-pointer block py-3 relative">
          <span class="">Title 1</span>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 absolute right-1 top-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
          </svg>
        </div>
        <ul class="bg-gray-50 border-t-2 border-gray-100">
          <li class="py-2">Sub-Item-1</li>
          <li class="py-2">Sub-Item-2</li>
          <li class="py-2">Sub-Item-3</li>
        </ul>
      </li>
      <li class="border-t-2 border-gray-200">
        <span class=" block py-3 cursor-pointer">Title 2</span>
      </li>
      <li class="border-t-2 border-gray-200">
        <span class=" block py-3 cursor-pointer">Title 3</span>
      </li>
    </ul>

下面是一个示例：https://jsfiddle.net/j6y3sznq/

【问题讨论】：

标签： html css tailwind-css

【解决方案1】：

.top-1\/2 类缺少变换属性，请考虑添加 transform: translateY(-50%) 以使其与中心对齐。

.top-1\/2 {
  transform: translateY(-50%);
}

更新小提琴here

解决方案二：Tailwind 类名。只需将 transform -translate-y-2/4 添加到 svg 元素即可。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css">
<ul id="sidemenu" class="text-center border-b-2 border-gray-200">
  <li class="border-t-2 border-gray-200">
    <div href="#" class="block cursor-pointer block py-3 relative">
      <span class="">Title 1</span>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 absolute right-1 top-1/2 transform -translate-y-2/4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
    </div>
    <ul class="bg-gray-50 border-t-2 border-gray-100">
      <li class="py-2">Sub-Item-1</li>
      <li class="py-2">Sub-Item-2</li>
      <li class="py-2">Sub-Item-3</li>
    </ul>
  </li>
  <li class="border-t-2 border-gray-200">
    <span class=" block py-3 cursor-pointer">Title 2</span>
  </li>
  <li class="border-t-2 border-gray-200">
    <span class=" block py-3 cursor-pointer">Title 3</span>
  </li>
</ul>

更新小提琴here

【讨论】：

谢谢！这行得通。但是仅仅使用顺风类是不可能解决这个问题的？
为什么不呢。我会更新小提琴给我一分钟
非常好，感谢顺风解决方案！现在我会去尝试理解为什么会这样。 :)
不客气。请尝试官方文档以获取更多详细信息tailwindcss.com/docs/transform
翻译属性tailwindcss.com/docs/translate的文档