I have a header that has two horizontal menus.
I want to center the middle items on the viewport. The second menu (white background) is easy to center because it’s the only element.
The menu with the blue background has elements on the left and right (which are different widths), so it’s centered in the outer container, but it’s not centered on the viewport, because of the elements to the left and right.
What’s the best way to do this?
We need to see your code.
If you make the elements to the left and right take up the same space then the menu will be centred.
There is actually no easy way to do what you are asking without there being some sort of caveat.
I have an old codepen with various solutions to this age old problem but all have drawbacks depending on situation.
In essence the left and right items need to be removed from the flow and the the centre item will centre in the viewport. However if you use absolute positioning for the left and right elements you lose the ability to determine when an overlap may occur.
It all depends on your situation on how to approach this which is why we like to see the code we have to work with 
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.