Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 72443

centering image responsive in boostrap grid

$
0
0

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

Hello I want to do a Responsive Centering in Bootstrap With css, along the way the Item is aligned in center, but when I Resize the browser gradually its observe that the image its align in the right, this is my code, I have and Bootstrap grid Structure, In the CSS code y use the left and right margins of elements

<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%;

}

enter image description here


Viewing all articles
Browse latest Browse all 72443

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>