Как мне отцентрировать изображение на jumbotron?

Question

Я недавно попал в начальную загрузку, и у меня возникли проблемы с элементом jumbotron.Всякий раз, когда я пытаюсь добавить изображение в jubotron и отцентрировать его или просто переместить, оно не работает с обычным css3.Я провел свое исследование и ничего не могу найти по нему ...

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

Спасибо всем продвинутым.

РЕДАКТИРОВАТЬ:

HTML:

<div class="middle-container-2">
  <div class="jumbotron">
    <h1 class="display-3 text-center">Go Pro. Stay on top!</h1>
    <p class="lead text-center">Premium gives you access to the Pro scrims instantly and is the only way to support the site!</p>
    <img class="mx-auto d-blok text-center unlock-icon" src="Unlock-icon.png" alt="Unlock"/>
    <hr class="my-4">
    <p class="text-center">It uses utility classes for typography and spacing to space content out within the larger container.</p>
    <p class="lead">
      <a class="read-more-button btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </p>
  </div>
</div>

CSS:

.unlock-icon {
  width: 5rem;
  height: 5rem;
  text-align: center;
}

Answer 1

Исправьте класс d-blok с классом d-block на вашем теге img.После этого вы можете удалить класс text-center и добавить класс img-fluid.

<img class="mx-auto d-block img-fluid unlock-icon" src="Unlock-icon.png" alt="Unlock"/>

Answer 2

Использование text-center для выравнивания текстового содержимого и mx-auto с центрированными блоками уровня блока является наиболее популярным трюком с использованием Bootstrap

• https://getbootstrap.com/docs/4.1/utilities/text/#text-alignment
• https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>      
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
  
  <p>This is some text.</p>      
  <p>This is another text.</p>      
  
  <div class="text-center"><img src="https://dummyimage.com/mediumrectangle/222222/eeeeee">
  
  </div>
  
</div>

Answer 3

добавить изображение в div и дать этому div какое-то выравнивание, например по центру или справа

.image-holder {
    text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>      
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
  
  <p>This is some text.</p>      
  <p>This is another text.</p>      
  
  <div class="image-holder"><img src="https://dummyimage.com/mediumrectangle/222222/eeeeee">
  
  </div>
  
</div>