在 boostrap 网格中居中响应图像

Question

 .centro{ display: flex; align-items: center; justify-content: center; margin: auto 0; padding:32px; } .uno img{ margin: auto 0; width:150px; } .uno:hover { background-color: #005ce2; height:185px; } .dos img{ width:150px; } .dos:hover { background-color: #c5d544; height:185px; } .tres img{ /*margin: auto 0;*/ width:150px; } .tres:hover { background-color: #005ce2; height:185px; } .uno, .dos, .tres, .cuatro{ margin-top:8em; height:185px; margin-left:-90px; margin-right:180px; } .C00{ position:relative; top:-70px; margin-right:90px; margin-left:50px; } .container-fluid{ width:160%; /*margin-left:30px; margin-right:100px;*/ }

 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <div class="container-fluid"> <div class="row C00"> <div class="col-lg uno centro"><img class="img-responsive center-block" src="https://i.imgur.com/nosZ9IN.png" /></div> <div class="col-lg dos centro"><img class="img-responsive center-block" src="https://i.imgur.com/vM2TeHE.png" /></div> <div class="col-lg tres centro"><img class="img-responsive center-block" src="https://i.imgur.com/vLrJkKM.png" /></div> <div class="col-lg cuatro centro">col-sm</div> </div> </div>

您好，我想在 Bootstrap 中使用 css 进行响应式居中，同时项目在中心对齐，但是当我逐渐调整浏览器的大小时，它观察到图像在右侧对齐，这是我的代码，我有和 Bootstrap grid结构，在CSS代码中y使用元素的左右边距

<div class="container-fluid">
<div class="row C00">
<div class="col-lg  uno centro"><img class="img-responsive center-block" src="http://localhost/wordpress/wp-content/uploads/2020/02/trabajo-en-equipo.png" /></div>
<div class="col-lg  dos centro"><img class="img-responsive center-block" src="http://localhost/wordpress/wp-content/uploads/2020/02/medalla.png" /></div>
<div class="col-lg tres centro"><img class="img-responsive center-block" src="http://localhost/wordpress/wp-content/uploads/2020/02/fluir.png" /></div>
<div class="col-lg  cuatro centro">col-sm</div>
</div>
</div>





.centro{
display: flex;
align-items: center;
justify-content: center; 
margin: auto 0;
padding:32px;
}

.uno img{
    margin: auto 0;
    width:150px;  
}
.uno:hover {
    background-color: #005ce2;
    height:185px;
}

.dos img{
    width:150px;  
}
.dos:hover {
    background-color: #c5d544;
    height:185px;
}

.tres img{
    /*margin: auto 0;*/
    width:150px;  
}
.tres:hover {
    background-color: #005ce2;
    height:185px;
}


.uno, .dos, .tres, .cuatro{
margin-top:8em;
height:185px;

margin-left:-90px;
margin-right:180px;
}

.C00{
position:relative;
top:-70px;

margin-right:90px;
margin-left:50px;
}

.container-fluid{

    width:160%;

}

Answer 1

这是有效的解决方案:)希望这会有所帮助

 .centro{ display: flex; align-items: center; justify-content: center; margin: auto 0; padding:32px; } .uno img{ margin: auto 0; width:150px; } .uno:hover { background-color: #005ce2; height:185px; } .dos img{ width:150px; } .dos:hover { background-color: #c5d544; height:185px; } .tres img{ /*margin: auto 0;*/ width:150px; } .tres:hover { background-color: #005ce2; height:185px; } .uno, .dos, .tres, .cuatro{ } .C00{ position:relative; } .container-fluid{ width:100%; }

 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <div class="container-fluid"> <div class="row C00"> <div class="col-lg uno centro"><img class="img-responsive center-block" src="https://i.imgur.com/nosZ9IN.png" /></div> <div class="col-lg dos centro"><img class="img-responsive center-block" src="https://i.imgur.com/vM2TeHE.png" /></div> <div class="col-lg tres centro"><img class="img-responsive center-block" src="https://i.imgur.com/vLrJkKM.png" /></div> <div class="col-lg cuatro centro">col-sm</div> </div> </div>