CSS How To Center A Component Onto A Page

  • 1
  • Question
  • Updated 2 years ago
  • Answered
I've built a page with a wrapper, responsive grid and more individual wrappers/components to create containers as shown in the illustration. 

However, when I output this, my components are not centered onto the page. 

Can someone help me with some CSS code to get this centered onto a page? 

Thank you!

Photo of ns

ns

  • 1,822 Points 1k badge 2x thumb

Posted 2 years ago

  • 1
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
A quick fix might be to put the wrapper in a responsive grid with 3 panels. Put the wrapper in the center panel. Set each panel to be flexible width with the same settings. Leave the two outer panels empty.
Photo of ns

ns

  • 1,822 Points 1k badge 2x thumb
I actually have 5 panels setup; illustration didn't show that :(
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
If you configure it like this with the outer-most grid panels set to flexible with with the same settings, it should center

Photo of ns

ns

  • 1,822 Points 1k badge 2x thumb
closer. 

The small x's at the top are perfectly centered and on one row. 

Mine as you can see are broken up but centered. 

Photo of ns

ns

  • 1,822 Points 1k badge 2x thumb
Ok seems like I got it. 

Just need to close up the gap within the column gutter.

This is expanded 100% across my screen now. 

Thanks!!!
(Edited)