How to center a nav bar?

Question

I am having troouble centering my nav bar to the middle of my page. I have not done any css as of yet.

HTML

<div class = "menu-wrap">

<nav class = "navMenu">

    <ul class = "ulMenu">

        <li><a href = "index.html">Home</a></li> 

            <li>

            <a href = "products.html">Products<span class="arrow">&#9660;</span></a> 

                <ul>
                    <li><a href = "#">#</a></li>
                    <li><a href = "#">#</a></li>
                </ul>

            </li>

        <li><a href = "contact.html">Contact Us</a></li> 
        <li><a href = "aboutUs.html">About </a></li> 

    </ul>

</nav>

possible duplicate of [how to center navigation bar with css or html?](http://stackoverflow.com/questions/5995405/how-to-center-navigation-bar-with-css-or-html) — Jan Chrbolka, Apr 02 '15 at 04:24

score 0 · Answer 1 · answered Apr 02 '15 at 04:07

You need to add some CSS to specify the class properties, which will define the properties of the elements you have defined as members of those classes.

Something like this

#menu-wrap {
    width:750px;
    margin:0 auto;
    list-style:none;
}

You can refer to this tutorial

Lynel Hudson · Answer 2 · 2015-04-02T04:24:46.593

So in order to align layout elements. You'll want to use CSS. Hopefully this will get you started:

When making a horizontal nav element, we usually use the float or display:inline properties to force the individual links on one line. To center the whole nav element you could give it a width as I've done here, which allows us to set its margin to auto which horizontally centers the whole div.

nav ul li{
    list-style:none;
    float:left;
    margin:5px;
}

nav{
    height:50px;
    display:table;
    background:#eee;
    margin:auto;
}

<div class = "menu-wrap">

<nav class = "navMenu">

    <ul class = "ulMenu">

        <li><a href = "index.html">Home</a></li> 

            <li>

            <a href = "products.html">Products<span class="arrow">&#9660;</span></a> 

                <ul>
                    <li><a href = "#">#</a></li>
                    <li><a href = "#">#</a></li>
                </ul>

            </li>

        <li><a href = "contact.html">Contact Us</a></li> 
        <li><a href = "aboutUs.html">About </a></li> 

    </ul>

</nav>

Still, it looks horrible. With a little more CSS styles, you can turn this menu into something great.

score 0 · Answer 3 · answered Apr 02 '15 at 04:19

0

Add align= "center"

<div class = "menu-wrap" align="center">

answered Apr 02 '15 at 04:19

Ashok Chowdary

101
1
7

That's a depreciated attribute. Bad idea. – Lynel Hudson Apr 02 '15 at 04:20

score 0 · Answer 4 · answered Sep 25 '17 at 08:22

.ul {
  display: -webkit-flex;
  display: flex;

  -webkit-justify-content: center;
  justify-content: center;  

  -webkit-align-items: center;
  align-items: center;

  width: 100%;
  height: auto;
  background-color: lightgrey;       
}

.li {
  background-color: white;
  padding: 0.5rem;
  margin: 0.5rem;       

  -webkit-align-self: center;       
  align-self: center;
}

a .li:hover {
  color: #000000;
  background-color: lightgreen;
  cursor: pointer;
}

<div class = "menu-wrap">

<div class="ul">
  <a><div class="li">Home</div></a>
  <a><div class="li">Products</div></a>
  <a><div class="li">Contact Us</div></a>  
  <a><div class="li">About</div></a>    
</div>
  
</div>

How to center a nav bar?

4 Answers4