Sat, 2022-11-05 20:29
Hi everyone.
I have six li flex, inside ul flex.
Some li take one line inside the block, some two.
align-items: center; - aligned all of them.
but justify-content: center; aligned only one-line content.
two-lines content on its tern, aligned only with align-items: center;
I can't get it, could someone explain me please, why it happens?
HTML
<body> <section class="service"> <h2>Our services</h2> <ul> <li>Eye vision check</li> <li>Children department</li> <li>Laser vision correction</li> <li>Treatment of keratoconus</li> <li>Laser treatment of eye diseases</li> <li>Treatment of cataract</li> </ul> </section> </body>
CSS
body { font-family: corbel; font-size: 24px; width: 1100px; margin: auto; } h2,h3{ color: #14931F; text-align: center; } .service ul { display: flex; width: 900px; height: 260px; flex-wrap: wrap; justify-content: center; margin-left: 100px; padding: 0; } .service li { display: flex; background-color: #DFDBF5; margin: 20px; width: 247px; height: 100px; justify-content: center; align-items: center; border-radius: 20px; text-align: center; }
Thank you
