I've been trying to make a column of images on the right of a centered video, but every time I manage to stack them, the video moves down. My goal is to keep the video centered in the top of the image and have a column of 4 images aligned in the right. Heres how the HTML5 code is going and de CSS so far.
<body style="background-color:#f7f5f7;">
<h1 align="center" class="Title">
Virgen Del Apocalipsis
</h1>
<div class="parent">
<img src="front_fotosF1.JPG" height="166px" width="260px" style="float:right">
<img src="front_fotosF2.JPG" height="166px" width="260px" style="float:right">
<img src="front_fotosF3.JPG" height="166px" width="260px" style="float:right">
<img src="front_fotosF4.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 code:
*{
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;
}
}
Below you can find the current state of the product, the 4 images on the top are the ones that need to be in a column at the right.
Current state image
question from:
https://stackoverflow.com/questions/65848734/stack-images-vertically-to-the-right-next-to-a-video 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
