Bootstrap поместил изображение над центром текста

Question

У меня есть следующий код:

   <div class="h-100 row align-items-center">
     <div class="col text-center">
       <div class="container">
       <h1> Applying to medicine? We can help.</h1>
       <button type="button" onclick="location.href='about.html'" class="btn btn-outline-success btn-lg">More information</button>
     </div>
   </div>
 </div>

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

Как я могу это сделать?

Answer 1

Вы можете использовать тег HTML img .

<div class="h-100 row align-items-center">
    <div class="col text-center">
        <div class="container">
            <img src="https://loremflickr.com/320/240" />
            <h1> Applying to medicine? We can help.</h1>
            <button type="button" onclick="location.href='about.html'" class="btn btn-outline-success btn-lg">More information</button>
        </div>
    </div>
</div>

<!-- Bootstrap imports: -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>