gpt4 book ai didi

html - 如何将包含 3 个图像的引导行居中?

转载 作者:行者123 更新时间:2023-11-28 16:28:33 27 4
gpt4 key购买 nike

我有一个包含 3 行的容器流体

第 1 行:4 张图片第 2 行:4 张图像第 3 行:3 张图片

我试图将第 3 行居中,我尝试将第 3 行添加到另一个名为“容器”的类中,并尝试在 css 中使用“左、右”,但没有成功,你能帮忙吗?

.b3 {
padding-bottom: 20px;
}

.client-section {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

.img-responsive {
padding-bottom: 10px;
}

#clients {padding-top:10px;padding-bottom:50px;color: #7e7e7e; background-color:#151515;}
<section class="container-fluid client-section" id="clients">
<div class="row">
<div>
<b class="col-lg-10
col-md-10
col-sm-10
col-xs-10
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1 b2 b3">Clients</b>
</div>
</div>
<div class="col-lg-10
col-md-10
col-sm-10
col-xs-10
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1">
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>


<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>

<div class="row center">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
</div>
</section>

最佳答案

这是你的解决方案吗

.b3 {
padding-bottom: 20px;
}

.client-section {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

.img-responsive {
padding-bottom: 10px;
}
.center .img-responsive{
margin:0 auto;
display:block;
}

#clients {padding-top:10px;padding-bottom:50px;color: #7e7e7e; background-color:#151515;}
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>


<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>

<div class="row center">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>

关于html - 如何将包含 3 个图像的引导行居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40404056/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com