Centralising images

[Valley_]

So i'm playing around trying to make a random website as practise.

 

I've got 3 cards all with images inside but I can only work out how to change the position of the first image. How do i change the others?

 

Using bootstrap for this as well

 

I am new to this so please forgive my noob

 

html: 

<!-- CARDS START -->
    <div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="img/cardPlaceholder3.png" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Ryzen 3700X</h5>
      <p class="card-text">CONTENT</p>
      <a href="#" class="btn btn-outline-secondary"> Add to basket<a/>  
    </div>
        
  </div>
  <div class="card">
    <img class="card-img-top" src="img/cardPlaceholder3.png" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">I9 9900K</h5>
      <p class="card-text">CONTENT</p>
      <a href="#" class="btn btn-outline-secondary"> Add to basket<a/>
    </div>
    
  </div>
  <div class="card">
    <img class="card-img-top" src="img/cardPlaceholder3.png" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Threadripper</h5>
      <p class="card-text">CONTENT</p>
      <a href="#" class="btn btn-outline-secondary"> Add to basket<a/>
    </div>
  </div>
</div>
 <!-- CARDS END -->

 

css: 

 

.card-img-top{
    width: 50%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

 

I figured since they all have the class .card-img-top that the css would apply for all of the images

 

 

[LogicalDrm]

First thing off Google https://www.w3schools.com/howto/howto_css_image_center.asp

 

Also, please use code tags.