How to center this <nav> element navigation bar of no width

css navigation

17,000

Solution 1

you can use

 nav { text-align: center }

Solution 2

IMO,

nav { margin: 0 auto;}

Explanation: "0" will set the "margin-top" & "margin-bottom" to zero. And "auto" property will set left and right margins equally thus setting nav to the centre;

Solution 3

Apply this style:

nav{
  margin: 0 auto;
  display: table;
}

demo

17,000

Author by

user3164311

Updated on June 04, 2022

Comments

user3164311 almost 2 years

I am having some problem with centering this horizontal navigation bar. Here is my JSFiddle: http://jsfiddle.net/W796k/embedded/result/ I'm looking for two things: 1. How can I center the navigation bar horizontally without putting a specified width? 2. How to further add some more 'li' in the 'ul' so that all the 'li's wil be squeezed automatically to make room for the new added 'li's in the navigation bar?

Have I made everything clear? Ask me if you need more info. Thank U all in advance.

Here is my code:

<Doctype! html>

<html>

<head>
<title> horizontal dropdown menu </title>

<style type="text/css" media="screen">

    a{
        font-family: "verdana", sans-serif;
        font-weight: bold;
    }
    nav ul{
        list-style: none;
        position: relative;
        background: #efefef;
        background: linear-gradient (top,#efefef,#bbbbbb);
        background: moz-linear-gradient (top, #efefef,#bbbbbb);
        background: webkit-linear-gradient (top,#efefef,#bbbbbb);
        box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
        padding: 0 20px;
        border-radius: 10px;
        display: inline-table;
    }
    nav ul li{
        display: inline-block;
        border-right: 1px solid #fff;
    }
    nav ul li:hover{
        background: #5b545f;
        background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    }
    nav ul li a{
        text-decoration: none;
        color: #000;
        padding: 20px 20px;
        display: block;
    }
    nav ul li:hover a{
        color: #ffffff;
    }
    nav ul ul{
        background: #5f6975;
        border-radius: 0; padding: 0;
        position: absolute; top: 100%;
        display: none;
    }
    nav ul li:hover > ul{
        display: block;
    }
    nav ul ul li{
        display: block;
        border-top: 1px solid #6b727c;
        border-bottom: 1px solid #575f6a;
        border-right: 0;
        position: relative;
    }
    nav ul ul li a{
        padding: 10px 40px;
    }
    nav ul ul li a:hover{
        background: #4b545f;
    }
    nav ul ul ul{
        position: absolute; left: 100%; top: 0;
    }

</style>
</head>

<body>
    <nav>
        <ul>
            <li><a href="#"> Home </a></li>
            <li><a href="#"> Works &#8595 </a>
                <ul>
                    <li><a href="#"> Photoshop </a></li>
                    <li><a href="#"> Illustrator  </a></li>
                    <li><a href="#"> Web Design &#8594 </a>
                        <ul>
                            <li><a href="#"> HTML </a></li>
                            <li><a href="#"> CSS </a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#"> Downloads &#8595 </a>
                <ul>
                    <li><a href="#"> Softwares </a></li>
                    <li><a href="#"> Ebooks </a></li>
                </ul>
            </li>
            <li><a href="#"> About Us </a></li>
            <li><a href="#"> Contact </a></li>
        </ul>
    </nav>
</body>

</html>