html - 如何在 HTML5 视频播放器中将字幕居中？如何进一步设置字幕/字幕的样式？

Question

字幕不在视频的中间底部播放，我希望它们播放。有没有什么好的方法来设计视频的字幕？使用 CSS？我已经尝试过了，它的工作达到了极限，但它们只是没有对齐它的中心。字幕播放到视频的左下角。

HTML：

<video controls = "controls" poster="#" id="myvideo" style= "object-fit: cover;">
    <source src = "#" video = "web/mp4">
    <track kind = "subtitles" srclang = "en" src = "#" label = "English" default>
</video>

CSS：

video::-webkit-media-text-track-container {
  /* Style the container */
  margin: 0px;
  padding: 0px;
}

video::-webkit-media-text-track-background {
  /* Style the text background */
  margin: 0px;
  padding: 5px;
  border-radius: 5px;
  background-color: rgb(200, 200, 200);
}

video::-webkit-media-text-track-display {
  /* Style the text itself */
  font-size: 15px;
  max-width: 250px;
}

有没有办法做到这一点？任何帮助，将不胜感激。

此外，我尝试了所有这些，

  text-align: center;
  align-content: center;
  align-items: center;
  align-self: center;
  justify-content: center;
  justify-self: center;
  justify-items: center;
  <center>###</center>

他们都没有工作。

Answer 1

使用该 ID 可能会带来一些运气。在你的css文件中试试这个。

.myvideo {text-align: center;}