I have some problems with centering my images. Basically I wanted to center my images in the center of my page. But if for example I go to another PC with another resolution my site gets all deformatado.
I wanted to know if anyone could help me.
css:
}
.imagens1{
position: absolute;
top: 220px;
left:310px;
}
.imagens2{
position: absolute;
top: 220px;
left: 550px;
}
.imagens3{
position: absolute;
top: 220px;
left: 790px;
}
.imagens4{
position: absolute;
top: 220px;
left: 1030px;
}
html:
<center>
<div class="w3-content w3-row">
<div class="w3-col s4 imagens1">
<br>
<img class="mySlides1 w3-animate-fading" src="1a.jpg" height="312" width="237">
<img class="mySlides1 w3-animate-fading" src="comida1.png" height="312" width="237">
<img class="mySlides1 w3-animate-fading" src="cozinha1.jpg" height="312" width="237">
</div>
<div class="w3-col s4 imagens2">
<br>
<img class="mySlides2 w3-animate-fading" src="1b.jpg" height="312" width="237">
<img class="mySlides2 w3-animate-fading" src="comida2.png" height="312" width="237">
<img class="mySlides2 w3-animate-fading" src="cozinha2.jpg" height="312" width="237">
</div>
<div class="w3-col s4 imagens3">
<br>
<img class="mySlides3 w3-animate-fading" src="1c.jpg" width="237px" height="312px">
<img class="mySlides3 w3-animate-fading" src="comida3.png" width="237px" height="312px">
<img class="mySlides3 w3-animate-fading" src="cozinha3.png" width="237px" height="312px">
</div>
<div class="w3-col s4 imagens4">
<br>
<img class="mySlides4 w3-animate-fading" src="1d.jpg" width="237px" height="312px" >
<img class="mySlides4 w3-animate-fading" src="comida4.png" width="237px" height="312px">
<img class="mySlides4 w3-animate-fading" src="cozinha4.jpg" width="237px" height="312px">
</div>
</center>