Question

我有一个包含两个元素的DIV：视频和图像。我希望这些保持水平居中;然而，他们略微偏向右侧中心。有人能发现我的错误吗？

HTML：

prepareForSegue:

CSS：

<center>

  <div id="videoWrapper">
    <canvas height="46%" width="46%"></canvas>
    <video id="video1" preload="metadata" controls>
      <source src="../Images/J's Garden FINAL MOVIE.mp4" type="video/mp4">
    </video><img src="../Images/videonav1.png" id="test" width="25%"   height="46%">
  </div>

Answer 1

如前所述，中心标记已弃用，不应使用。我重新整理了你的CSS以达到你想要的效果。基本上text-align: center标记位于视频标记旁边，将其推向一边。我发现在进行故障排除时，将任意背景颜色应用于每个元素以查看它们如何相互影响会有所帮助。

在这个例子中，我使用#videoWrapper { text-align: center; } #videoWrapper * { margin: 0 auto; display: block; } #video1, #test { height: 46%; }来居中项目

<div id="videoWrapper">
    <canvas height="46%" width="46%"></canvas>
    <video id="video1" preload="metadata" controls>
        <source src="../Images/J's Garden FINAL MOVIE.mp4" type="video/mp4">
    </video>
    <img src="../Images/videonav1.png" id="test" width="25%" height="46%">
</div>

{{1}}

Answer 2

我认为默认图片标签是内联的，所以你通过text-align：center使它居中，你也可以尝试使用textideign：center on the videowrapper div

为什么不赢得DIV中心？

2 个答案: