我正在尝试将一行中的所有列水平居中在引导程序 4 中。
第一行正确居中对齐,但第二行列不能正常工作,尽管我使用了相同的类。
我的代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.bg{
background: url('bg.jpg') center / cover no-repeat;
height: 600px;
}
.row1{
padding-top: 200px;
}
.row2{
padding-top: 100px;
}
img{
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
border-radius: 6px;
}
.img1{
height: 164px;
}
.img2{
height: 258px;
width: 238px;
}
</style>
</head>
<body>
<div class="container-fluid bg">
<div class="row justify-content-center row1">
<img src="img1.jpg" class="img1" alt="Italian Trulli">
</div>
<div class="row justify-content-center row2">
<div class="col col-lg-2">
<img src="img1.jpg" class="img2" alt="Italian Trulli">
</div>
<div class="col col-lg-2">
<img src="img1.jpg" class="img2" alt="Italian Trulli">
</div>
<div class="col col-lg-2">
<img src="factory.jpg" class="img2" alt="Italian Trulli">
</div>
</div>
</div>
</body>
</html>
结果如下(第二行没有正确对齐)
答案 0 :(得分:1)
cols 水平居中。只是您在 css 中设置的图像大小没有覆盖 col 的整个宽度。因此,“视觉上”似乎它们没有居中。请记住,使用您共享的代码,您将水平居中 col div,而不是图像
见下面的例子
如您所见,cols(红色边框)在行(蓝色边框)内水平居中,但 imgs 的宽度较小,因此它们不居中
.bg{
background: url('bg.jpg') center / cover no-repeat;
height: 600px;
}
.col {
overflow: hidden;
}
.row {
border:1px solid blue
}
img{
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
border-radius: 6px;
}
.img1{
height: 164px;
}
.img2{
height:50px;
width: 50px;
}
.col {
border:1px solid red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid bg">
<div class="row justify-content-center row2">
<div class="col col-2">
<img class="img2" src="https://via.placeholder.com/150" />
</div>
<div class="col col-2">
<img class="img2" src="https://via.placeholder.com/150" />
</div>
<div class="col col-2">
<img class="img2" src="https://via.placeholder.com/150" />
</div>
</div>
</div>