图片在网页上未正确对齐

Question

由于某种原因，我网页上的图片与视频未正确对齐。它看起来像这样：This is the image on my webpage

当我尝试将图片向上移动时，它仍然无法正确对齐，jsut 会将所有内容向上移动。如何正确对齐图像和视频。 到目前为止，这是我的代码：

<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>

这将强制图像和视频保持在两列中，并且很可能彼此对齐。我还建议检查元素以查看是否有任何填充或边距导致错位。