在Podlove Web Player的海报图像顶部的中心播放按钮

Question

我想显示一个非常基本的模板(只有播放按钮和海报图像)为Podlove Web播放器。基本代码是这样的(文档)，但是它在海报图像的右边显示按钮:

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

Edit:我设法将按钮显示在图像的顶部并垂直居中，但它仍然被挤压到左侧边缘。

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

如何将按钮显示在海报图像的顶部并居中?

Podlove使用的是顺风CSS，我不太熟悉。

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元素的中心位置。这可能不是你想要的，因为按钮不会相对于玩家居中。移动播放器，例如通过添加另一个元素，将阻止播放按钮居中。