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

Question

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

    </div>
    <div class="col-sm-4">
       <h3 style="color:black;">APA 7th Edition. What is different? </h3>
        <style>
       .img-container {
      text-align: center;
    }
  </style>

  <div class="img-container"> <!-- Block parent element -->
         <img src="APA.jpg">

       <a href="Jobs.html">
       <p class="inset">The 7th edition APA manual has been released.  Do you know what the 
       differences are?</p>
       <p><br />

   </div>

Answer 1

Возможно, вам стоит добавить margin: auto к вашему изображению. Все элементы с атрибутом margin, установленным на auto, будут автоматически центрироваться по ширине его контейнера. Если вы также хотите центрировать текст, вы можете добавить атрибут text-align: center к классу контейнера. Вот пример:

.container{
  width: auto;
  text-align: center;
}

.images {
  margin: auto;
}

<div class="container">
  <img class="images" src"http://images.jpg" alt="images">
  <a href="#"><p>The 7th edition APA manual has been released. Do you know what the differences are?</p></a>
</div>