Center align container and left align child elements

by

There isn’t an easy way to achieve the layout with plain CSS as far as I know. The following approach uses media queries to set the width of inner divs for different viewport sizes.

Consider to use Javascript if you have a rather large number of items, CSS preprocessors might be helpful too.

See code snippet and comments inline, also check out the jsfiddle example for easy testing.

body {
    margin: 10px 0;
}
.outer {
    text-align: center;
}
.inner {
    font-size: 0; /* fix for inline gaps */
    display: inline-block;
    text-align: left;
}
.item {
    font-size: 16px; /* reset font size */
    display: inline-block;
    margin: 5px; /* gutter */
}
.item img {
    vertical-align: top;
}
@media (max-width: 551px) { /* ((100+5+5)x5)+1 */
    .inner {
        width: 440px; /* (100+5+5)x4 */
    }
}
@media (max-width: 441px) {
    .inner {
        width: 330px;
    }
}
@media (max-width: 331px) {
    .inner {
        width: 220px;
    }
}
@media (max-width: 221px) {
    .inner {
        width: 110px;
    }
}
<div class="outer">
    <div class="inner">
        <div class="item"><img src="https://dummyimage.com/100"></div>
        <div class="item"><img src="https://dummyimage.com/100"></div>
        <div class="item"><img src="https://dummyimage.com/100"></div>
        <div class="item"><img src="https://dummyimage.com/100"></div>
        <div class="item"><img src="https://dummyimage.com/100"></div>
    </div>
</div>

More Related Contents:

  1. Browser is not displaying images
  2. How can I select an element with multiple classes in jQuery?
  3. Why is there an unexplainable gap between these inline-block div elements? [duplicate]
  4. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  5. Put icon inside input element in a form
  6. Grid properties not working on elements inside grid container
  7. Is element block level or inline level?
  8. Can I change the checkbox size using CSS?
  9. Maintain the aspect ratio of a div with CSS
  10. How do I give text or an image a transparent background using CSS?
  11. Border length smaller than div width?
  12. Should I specify height and width attributes for my IMGs in HTML?
  13. CSS ”background-color” attribute not working on checkbox inside
  14. How to determine height of content-box of a block and inline element
  15. Inspect webkit-input-placeholder with developer tools
  16. My Footer Floats
  17. How to center cards in bootstrap 4?
  18. Create line numbers on pre with CSS only
  19. How to include a font .ttf using CSS?
  20. CSS grid wrapping
  21. How can I create a row-based masonry layout using CSS?
  22. Selecting the last element among various nested containers
  23. Why using absolute position causes the div to be on top?
  24. Element with “display: inline-flex” has a strange top margin
  25. How to flatten nested divs to display them in a CSS grid?
  26. Can a div have multiple classes (Twitter Bootstrap) [duplicate]
  27. Why would Google use a font tag?
  28. Styling the “ element in CSS?
  29. inline-block element with no text renders differently
  30. Sizing flex items on the last row

Leave a Comment