Center images when window is resized

Question

I'm displaying a lot of images. When the window is resized, I want to be able to center the number of images fits within the window. currently it aligns to the left when when the browser window is resized.

li {
    float:left; 
    display: inline-block;
    margin: 10px;
    width: 250px;
    max-width: 100%;
    text-align:center;
}

.itemS{
    max-width:1366px;   
    text-align:center;
    margin: 0 auto;
}
.itemS.itemType{
    width: 250px;
    padding:10px;
    background-color:#333;
    position:absolute;
    top:0px;
    text-align:center; 
}

Could you provide the HTML? (Simplified) – blex May 08 '14 at 18:30 — blex, May 08 '14 at 18:30

score 1 · Answer 1 · edited May 23 '17 at 11:50

I believe what you want is CSS Media Queries. You set breakpoints in the queries, and when the browser window is larger or smaller than the breakpoint, your new styles are applied.

If this is your initial style:

li {
    float:left; 
    display: inline-block;
}

You may want to change the div when the browser window is below 768, you change styles this way:

@media all and (max-width: 768px) {
    li {
        float: none;
        margin: 0 auto;
    }
}

Read more at CSS-Tricks or in this answer.

Hope this can get you on the way! Good luck!

Center images when window is resized

1 Answers1