How do I position the nav in the center of the page?

Question

I want to position the navbar in the center of the page in css. I wrote css as nav, ul, li and a

I tried text-align: center; on nav, nav ul, nav ul li, nav ul li a, but all these didn't work.

I only hope there is another property to use

Post relevant code. No one can inspect the issue without proper code. — Nitheesh, Jul 27 '23 at 08:12
`text-*` works for .. _well_ .. text nodes, not for block elements — Justinas, Jul 27 '23 at 08:19

score -1 · Answer 1 · answered Jul 27 '23 at 08:15

-1

This should work:

.wrapper{
   display: flex;
   justify-content: center;
   align-items: center;
}

Now every item in the .wrapper gets centered vertically and horizontally. You can of course style your wrapper in any way you want. If you want it to fill the whole screen, use height: 100vh; & width: 100vw;. Don't forget to put your nav inside of a div with the .wrapper class in your HTML file.

Hope this helps.

Happy Coding!

answered Jul 27 '23 at 08:15

Xaverrrrr

35
8

OP can just put the wrapper around it, or apply the properties to the parent element. – Xaverrrrr Jul 27 '23 at 08:19

How do I position the nav in the center of the page?

1 Answers1