<main class="inline-block-center"> <div> Je suis un élément de type bloc avec mes frères et mes sœurs, nous sommes centrés dans une ligne. </div> <div> Je suis un élément de type bloc avec mes frères et mes sœurs, nous sommes centrés dans une ligne. J'ai un peu plus de contenu que les autres blocs. </div> <div> Je suis un élément de type bloc avec mes frères et mes sœurs, nous sommes centrés dans une ligne. </div> </main> <main class="flex-center"> <div> Je suis un élément de type bloc avec mes frères et mes sœurs, nous sommes centrés dans une ligne. </div> <div> Je suis un élément de type bloc avec mes frères et mes sœurs, nous sommes centrés dans une ligne. J'ai un peu plus de contenu que les autres blocs. </div> <div> Je suis un élément de type bloc avec mes frères et mes sœurs, nous sommes centrés dans une ligne. </div> </main>
body { background: #3e58aa; font-size: 80%; } main { background: #FFFFFF; margin: 20px 0; padding: 10px; } main div { background: #CCDCCD; color: #3e58aa; padding: 15px; max-width: 125px; margin: 5px; } .inline-block-center { text-align: center; } .inline-block-center div { display: inline-block; text-align: left; } .flex-center { display: flex; justify-content: center; }