CODEWITHSUNDEEP
htmlcss
soroush Abd
soroush Abd

Reputation: 103

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>

Upvotes: 0

Views: 79

Answers (3)

William Luisan
William Luisan

Reputation: 126

<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 class="raa">
        <div class="rab">
            <h5>
                <span class="course-title">دوره های آموزشی</span>
            </h5>
        </div>
        <div class="row">
            <div class="col-md-4">
                <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>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <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>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <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 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>
</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.

Upvotes: 1

Nick Vu
Nick Vu

Reputation: 15520

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

Upvotes: 0

Hex
Hex

Reputation: 59

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

Upvotes: 0

Related Questions