图片在网页上不能正确排列

Question

我的网页上的图片由于某种原因没有与视频正确对齐。它看起来像这样。这是我网页上的图片

当我尝试将图片上移时，它仍然不能正确对齐，只是将所有东西上移。我如何才能正确对齐图像和视频。这是我目前的代码。

<div class="col-md-9">
                      <div id="page-1" class= "page one">
                        <h2 class="heading">Projects</h2>
                        <div class="resume-wrap d-flex ftco-animate">
                            <div class="icon d-flex align-items-center justify-content-center">
                                <span class="flaticon-ideas"></span>
                            </div>
                            <div class="text pl-3">
                                <span class="date">Feb 2020</span>
                                <h2>CLARITY - NSBE Hacks UofT</h2>
                                <span class="position"> First place winner and winner of best Google hack</span>
                                <p> Clarity is a web app catered towards children that struggle with autism. Children with autism have trouble recognising the emotions of other people. Our application listens peoples speech and analyzes the emotions being conveyed in said speech. After the analysis, recommendations are given to the user on how to navigate the situation, in an attempt to make navigating social situations easier. </p>
                                <img src="/static/images/clarity.png" height = 200px width = 250px>
                                <video width="300" height="300" controls>
                                <source src= "/static/video.mp4" type ="video/mp4">
                            </div>
                        </div>

Answer 1

试着将图片和视频封装在自己的Bootstrap div中。像这样。

<div class="md-col-6">
  <img src="/static/images/clarity.png" height = 200px width = 250px>
</div>
<div class="md-col-6">
  <video width="300" height="300" controls>
</div>

这将迫使图像和视频保持在两列中， 并很可能对准对方。我还建议检查元素，看看是否有任何padding或margin导致了错位。