.container { width: 90%; margin: 0 auto; height: 100%; } .projects { margin-top: 120px; margin-left: auto; margin-right: auto; } .projects_con { text-align: center; } .buttons { margin-top: 40px; width: 80%; margin-left: auto; margin-right: auto; } .buttons ul { list-style: none; display: flex; justify-content: space-between; } ul .button2 { text-decoration: none; white-space: nowrap; padding: 10px 20px; border-radius: 3px; border: 1px solid #000; color: #8c8c8c; } 
 <section class="projects"> <div class="container"> <div class="projects_con"> <div class="buttons"> <ul> <li><a href="#" class="button2">All</a></li> <li><a href="#" class="button2">Web Design</a></li> <li><a href="#" class="button2">Mobile App</a></li> <li><a href="#" class="button2">Illustration</a></li> <li><a href="#" class="button2">Photography</a></li> </ul> </div> </div> </div> </section>

There are buttons superimposed flexbox. When the screen is reduced, the blocks stop at the same place and then stop positioning in the center (for some reason, the screenshot fails to load).

How to achieve such an effect so that the blocks do not cease to be positioned in the center and, accordingly, the first and last blocks climbs off the screen?

Now:

enter image description here

It should be:

enter image description here

  • correctly describe what functionality you want to do? - Marseilles
  • @ Marcel Added - midia

1 answer 1

I saw it somehow so-so - https://codepen.io/qwerty_wasd/pen/zLMBYb :

 *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; outline: 0; } /*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/ html, body, section.projects { width: 100%; } section.projects { position: relative; margin: 50px auto; } .container { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .projects_con { width: 100%; } .buttons { margin-top: 40px; width: 80%; text-align: center; } .buttons ul { list-style: none; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } ul .button2 { text-decoration: none; white-space: nowrap; padding: 10px 20px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #000; color: #8c8c8c; } 
 <section class="projects"> <div class="container"> <div class="projects_con"> <div class="buttons"> <ul> <li><a class="button2" href="#">All</a></li> <li><a class="button2" href="#">Web Design</a></li> <li><a class="button2" href="#">Mobile App</a></li> <li><a class="button2" href="#">Illustration</a></li> <li><a class="button2" href="#">Photography</a></li> </ul> </div> </div> </div> </section>