Изображение неправильно выравнивается на веб-странице - PullRequest
Новая
       47

Изображение неправильно выравнивается на веб-странице

0 голосов
/ 28 апреля 2020

Изображение на моей веб-странице по какой-то причине неправильно выровнено с видео. Это выглядит так: Это изображение на моей веб-странице

Когда я пытаюсь сместить изображение вверх, оно все равно не выравнивается должным образом, а 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>

1 Ответ

0 голосов
/ 28 апреля 2020

Попробуйте инкапсулировать изображения и видео в свои собственные 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>

Это заставит изображение и видео остаться в двух столбцах и, скорее всего, выровняться друг с другом. Я бы также порекомендовал осмотреть элемент, чтобы убедиться, что какие-либо отступы или поля вызывают смещение.

...