时间戳

首页 > 解决方案 > 在视频旁边垂直堆叠图像

html - 在视频旁边垂直堆叠图像

问题描述

我一直在尝试在居中视频的右侧制作一列图像，但每次我设法堆叠它们时，视频都会向下移动。我的目标是将视频保持在图像顶部的中心，并在右侧对齐一列 4 个图像。到目前为止，这是 HTML5 代码的运行方式和 de CSS。

    <body style="background-color:#f7f5f7;">
     <h1 align="center" class="Title">
      Virgen Del Apocalipsis
     </h1>

    <div class="parent">
     <img src="front_fotos\F1.JPG" height="166px" width="260px" style="float:right">
     <img src="front_fotos\F2.JPG" height="166px" width="260px" style="float:right">
     <img src="front_fotos\F3.JPG" height="166px" width="260px" style="float:right">
     <img src="front_fotos\F4.JPG" height="166px" width="260px" style="float:right">
    </div>

    <video style="float:center" class="center" muted autoplay loop controls >
      <source src="virgengrande.mp4" type="video/mp4">
      <source src="virgengrande.ogg" type="video/ogg">
      Your browser does not support the video tag.
    </video>

  </body>

CSS 代码：

*{
  margin: 0;
  padding: 0;
}

.Title {
  align: center;
  font-family: fantasy;
  padding: 25px;
}

.center {
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding-left: 0%;
}

@media only screen and (min-width: 768px) {
  .wrapper{
    width: 600px;
    margin: 0 auto;
  }

}

您可以在下面找到产品的当前状态，顶部的 4 个图像是需要在右侧列中的图像。

当前状态图像

标签： htmlcss

解决方案

尝试将css添加到父级

.parent {
  vertical-align: middle;
  float: right;
 }

并删除图像中的浮动右 css

推荐阅读