Centralize Nav element

Asked

Viewed 9,688 times

5

I’m not getting to center the element <nav>

HTML:

<nav class="menu">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Responsive</a></li>
        <li><a href="#">Responsive</a></li>
        <li><a href="#">Responsive</a></li>
    </ul>
</nav>

CSS:

.menu {position: fixed; top: 0; width: 100%;}
.menu ul {font-size: 15px; margin: 0 auto; }
.menu ul li {display: inline; }
.menu ul li a {margin: 0 auto;}

Imagery: nav

html css html5 css3
  • 1

    You can put your code?

  • 1

    Please post html and css for help

  • Also try to explain better the question, what you did and what the problem is.

  • 1

    I edited the post with my code.

  • Can you get an image of your Nav?

  • @Jorgeb. I edited the post with the image.

Show 1 more comment

1 answer

9


A simple text-align:center; on the selector .menu ul must solve.

So the CSS would look like this:

.menu {position: fixed; top: 0; width: 100%;}
/* ↓ eu só subistitui o margin por text-align:center na linha abaixo ↓ */
.menu ul {font-size: 15px; text-align:center; }
.menu ul li {display: inline; }
.menu ul li a {margin: 0 auto;}

Example:

FIDDLE

  • Thank you. It worked!

  • Faster than me, eh! Haha.

  • 2

    Thanks @Guilhermeoderdenge , I was looking at your profile and your website URL has a typo (.cmo instead of .com), just a touch. :)

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.