Podlove 网络播放器中海报图像顶部的中心播放按钮

Question

我想为 Podlove 网络播放器显示一个非常基本的模板（只有播放按钮和海报图像）。基本代码是这样的（Docs），但它在海报图像的右侧显示按钮：

<root class="flex">
  <poster></poster>
  <play-button></play-button>
</root>

编辑：我设法在图像顶部显示按钮并垂直居中，但它仍然被挤压到左边缘。

<root>
  <poster class="w-full"></poster>
  <play-button class="absolute inset-0"></play-button>
</root>

如何在海报图片上方显示按钮并将其居中？

Podlove用的是TailwindCSS，我不是很熟悉

Answer 1

这应该可以正常工作：

<root class="flex justify-center">
  <poster class="w-full"></poster>
  <play-button class="absolute self-center"></play-button>
</root>

Answer 2

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<root class="p-4 flex justify-center">
  <poster id="poster" class="relative h-40 w-56 rounded bg-blue-700">
    <!-- Play Button -->
    <svg xmlns="http://www.w3.org/2000/svg" class="absolute text-white top-1/2 left-1/2 h-10 w-10 -translate-x-1/2 -translate-y-1/2 transform cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
      <path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
      <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  </poster>
</root>

或者，使用原始的 Podlovers 组件：

<root class="p-4 flex justify-center">
  <poster id="poster" class="relative h-48 w-48">
    <play-button variant="simple" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform" />
  </poster>
</root>

其他解决方案建议绝对将播放按钮置于 root 元素的中心。这可能不是您想要的，因为按钮不会相对于播放器居中。移动播放器，例如通过添加另一个元素，播放按钮将停止居中。

Podlove 网络播放器中海报图像顶部的中心播放按钮

Center play button on top of poster image in Podlove Web Player

css

z-index

tailwind-css