'how to align picture horizontally in HTML-CSS

Hi How I can align picture in HTML _ CSS horizontally

and please align picture of my code horizontally

col-xl-4 col-l-4 col-md-4 are media queries in CSS no more detail

I don't know but do you think the problem is in my media queries ?

@media only screen and (min-width: 1200px){
.col-xl-4 {width: 33.33%;}
.col-xl-12 {width: 100%;}
}
@media only screen and (min-width: 992px){
.col-l-4 {width: 33.33%;}
.col-l-12 {width: 100%;}
}
@media only screen and (min-width: 768px){
.col-md-4 {width: 33.33%;}
.col-md-12 {width: 100%;}
}
<section class="raa">
    <div class="rab">
      <h5>
        <span class="course-title">دوره های آموزشی</span>
      </h5>
    </div>
    <div class="row">
      <div class="col-xl-12 col-l-12 col-md-12">
        <div class="card"> 
          <div class="card-header col-xl-4 col-l-4 col-md-4 ">
            <img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="">
          </div>
          <div class="card-body">
            <h3>
              آموزش مبانی SQL
            </h3>
            <h5>
              مدرس : تام هاردی
            </h5>
          </div>
          <div class="card-header col-xl-4 col-l-4 col-md-4 ">
            <img src="https://www.w3schools.com/howto/img_forest.jpg" alt="">
          </div>
          <div class="card-body">
            <h3>
              آموزش مبانی SQL
            </h3>
            <h5>
              مدرس : تام هاردی
            </h5>
          </div> <div class="card-header col-xl-4 col-l-4 col-md-4 ">
            <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
          </div>
          <div class="card-body">
            <h3>
              آموزش مبانی SQL
            </h3>
            <h5>
              مدرس : تام هاردی
            </h5>
          </div>
        </div>
      </div>
    </div>
</section>
htmlcss


Solution 1:[1]

You can add margins to the left and right that will make it put in the center of the parent object:

img {
  margin-left: auto;
  margin-right: auto;
}

Solution 2:[2]

On the card-header class, you can add this style for horizontal image centralization.

.card-header img {
   margin: 0 auto;
}

You will have this result

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hex
Solution 2 Nick Vu

Related Questions