如何在 HTML-CSS 中水平對齊圖片
[英]how to align picture horizontally in HTML-CSS
問題描述
嗨，我如何水平對齊 HTML _ CSS 中的圖片
請水平對齊我的代碼圖片
col-xl-4 col-l-4 col-md-4 是 CSS 中的媒體查詢 不再詳述
我不知道，但您認為問題出在我的媒體查詢中嗎？
@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>
3 個解決方案
解決方案1
1 已采納 2022-03-05 15:39:23
<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>
可以試試這個代碼。 您可以嘗試在相關的 CSS 列 class 上使用float: left並在您創建的 CSS 列中調整卡的 html 元素結構。
解決方案2
0 2022-03-05 15:04:42
您可以在左側和右側添加邊距，使其位於父 object 的中心：
img {
margin-left: auto;
margin-right: auto;
}
解決方案3
0 2022-03-05 15:17:34
在card-header class 上，你可以添加這個樣式用於水平圖像集中。
.card-header img {
margin: 0 auto;
}
你會得到這樣的結果
HTML-CSS：“自定義”菜單不會水平滾動
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.