Question

我正在尝试将一行中的所有列水平居中在引导程序 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>

结果如下（第二行没有正确对齐）

Answer 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>

水平居中行 div

1 个答案: