how to align picture horizontally in HTML-CSS-CodePudding

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 >
    <div >
      <h5>
        <span >دوره های آموزشی</span>
      </h5>
    </div>
    <div >
      <div >
        <div > 
          <div >
            <img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="">
          </div>
          <div >
            <h3>
              آموزش مبانی SQL
            </h3>
            <h5>
              مدرس : تام هاردی
            </h5>
          </div>
          <div >
            <img src="https://www.w3schools.com/howto/img_forest.jpg" alt="">
          </div>
          <div >
            <h3>
              آموزش مبانی SQL
            </h3>
            <h5>
              مدرس : تام هاردی
            </h5>
          </div> <div >
            <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
          </div>
          <div >
            <h3>
              آموزش مبانی SQL
            </h3>
            <h5>
              مدرس : تام هاردی
            </h5>
          </div>
        </div>
      </div>
    </div>
</section>

CodePudding user response：

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;
}

CodePudding user response：

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

CodePudding user response：

<head>
    <style>
        .border {
            border: solid black
        }

        @media only screen and (min-width: 1200px) {
            .col-xl-4 {
                width: 33.33%;
                float: left;
                
            }

            .col-xl-12 {
                width: 100%;
            }
        }

        @media only screen and (min-width: 992px) {
            .col-l-4 {
                width: 33.33%;
                float: left;
            }

            .col-l-12 {
                width: 100%;
            }
        }

        @media only screen and (min-width: 768px) {
            .col-md-4 {
                width: 33.33%;
                float: left;
            }

            .col-md-12 {
                width: 100%;
            }
        }

        .card-body {
            padding-top: 80%;
        }
    </style>
</head>

<body>
    <section >
        <div >
            <h5>
                <span >دوره های آموزشی</span>
            </h5>
        </div>
        <div >
            <div >
                <div >
                    <div >
                        <img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="">
                    </div>
                    <div >
                        <h3>
                            آموزش مبانی SQL
                        </h3>
                        <h5>
                            مدرس : تام هاردی
                        </h5>
                    </div>
                </div>
            </div>
            <div >
                <div >
                    <div >
                        <img src="https://www.w3schools.com/howto/img_forest.jpg" alt="">
                    </div>
                    <div >
                        <h3>
                            آموزش مبانی SQL
                        </h3>
                        <h5>
                            مدرس : تام هاردی
                        </h5>
                    </div>
                </div>
            </div>
            <div >
                <div >
                    <div >
                        <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
                    </div>
                    <div >
                        <h3>
                            آموزش مبانی SQL
                        </h3>
                        <h5>
                            مدرس : تام هاردی
                        </h5>
                    </div>
                </div>
            </div>
            <!-- <div >
                <div >
                    <div >
                        <img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="">
                    </div>
                    <div >
                        <h3>
                            آموزش مبانی SQL
                        </h3>
                        <h5>
                            مدرس : تام هاردی
                        </h5>
                    </div>
                    <div >
                        <img src="https://www.w3schools.com/howto/img_forest.jpg" alt="">
                    </div>
                    <div >
                        <h3>
                            آموزش مبانی SQL
                        </h3>
                        <h5>
                            مدرس : تام هاردی
                        </h5>
                    </div>
                    <div >
                        <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
                    </div>
                    <div >
                        <h3>
                            آموزش مبانی SQL
                        </h3>
                        <h5>
                            مدرس : تام هاردی
                        </h5>
                    </div>
                </div>
            </div> -->
        </div>
    </section>
</body>

Can try this code. You can try use float: left on the related CSS column class and adjust the html element structure of your card inside CSS column that you'hve created.