Problem in centering images

Asked

Viewed 108 times

-1

I’m having some problems centering my images. I basically 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 deformed.

I was wondering 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>
html css

  • The images are side by side?

  • Yes, they as much as I want. But n are in the center of the page. so much to the right. and if I go to another pc with a different resolution, my site gets all messed up. That’s basically it.

  • Use Percentages instead of pixels so it never looks the same on all computers

  • some tips: first, note that the widthand height of all images is the same, so why not remove from the html and for a single class in the css. Second, if you use position: absolute and fixed measures in positioning, will not work in any resolution, should think in mediates in %, but try to use margin: 0 auto to center horizontally.

3 answers

1

<style type="text/css">

    .flex{

        display: flex;
        flex-wrap: wrap;
        width: 70%;
        margin: auto;

    }

    .center{

        justify-content: center;
        position: relative;
    }

    .img{width: calc(25% - 2px); height: 200px; background: tomato; border: 1px solid #bdbdbd;}

    .img:hover{background: #bdbdbd;}

    @media(max-width: 920px){

        .img{width: calc(50% - 2px); height: 200px; background: tomato; border: 1px solid #bdbdbd;} 

    }

    @media(max-width: 768px){

        .img{width: calc(100% - 2px); height: 200px; background: tomato; border: 1px solid #bdbdbd;}    

    }



</style>


<div class="flex center">

    <div class="img"></div>
    <div class="img"></div> 
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div> 

</div>

Just adapt the percentages you need and put the img tags inside the div’s with width 100%.

0

One of the many ways for you to center an image is to use margins and percentages that unlike pixels, does not depend on the screen resolution.

.img {
  margin-left: 35%;
}
<img src="data:image/jpeg;base64,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" class="img" alt="" />

-1

To center the images Horizontally and Vertically can do just as in this example.

With transform: translate(-50%,-50%) will center both horizontally and vertically. The field left and top have to be specified.

How do you know the width and the height this way works well

  • While this link may answer the question, it is best to include the essential parts of the answer here and provide the link for reference. Replies per link only can be invalidated if the page with the link is changed. - Of Revision

  • Well, I explained that I used the transform: translate(-50%,-50%) which is basically the answer

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.