Good day. I want to implement the following (see diagram) I want to implement

Inside the #wrapper block (width is not fixed) there are a number of div blocks of fixed width and height with float: left. However, since these blocks are pressed to the left edge, it is impossible to center them, as in the figure above.

Do not tell me how to be?

#wrapper { border: 1px solid black; display: table; margin: auto; width: 70%; } #wrapper div { border: 1px solid black; float: left; height: 230px; margin: 5px; width: 140px; } 
 <div id='wrapper'> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

    2 answers 2

     #wrapper { border: 1px solid black; display: table; text-align: center; margin: auto; width: 70%; font-size: 0; } #wrapper div { border: 1px solid black; display: inline-block; vertical-align: top; height: 230px; margin: 5px; width: 140px; font-size: 14px; } 
     <div id='wrapper'> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

    do through display: inline-block and not float , but this method has nuance as an indent for blocks of child #wrapper div , this is solved if you set the font-size: 0 to #wrapper block in your case, but do not forget to return the font size #wrapper div so that if there wakes its text was visible.

    • and what a nuance? In a sense, what exactly is it manifested in? - n.osennij
    • if you remove the parent display: table (it is not needed there in principle) and remove the font-size: 0; then an extra space will appear on the tiles, sometimes it is not needed at all and even hinders. - Karalahti
    • one
      due to the fact that the tiles become display: inline-block; they become, as it were, both blocks and inline elements, while inlines (for example, text) have a so-called letter case, which, when using display: inline-block, manifests itself in the form of such an indentation. I think that clearly explained))) - Karalahti
    • In general, if you do not need support for old browsers, for example, ie9 and below, then you need to use the flex-box, this is the future of the entire layout, you will find about it in Google)) - Karalahti
    • Thanks for the reply and comments! Support, alas, is needed. - n.osennij

     #wrapper { border: 1px solid black; text-align: center; margin: auto; width: 70%; } #wrapper div { border: 1px solid black; display: inline-block; height: 230px; margin: 5px; width: 140px; } 
     <div id='wrapper'> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>