Centralize nav element

4

I can not centralize the <nav> element

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;}

Image:

    
asked by anonymous 06.05.2014 / 18:32

1 answer

8

A simple text-align:center; in the .menu ul selector should resolve.

So 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

    
06.05.2014 / 18:54