How do I position my navigation bar?

Question

I just started my first practice site and I cant seem to position the navigation bar where I want it. I want it centered in the header right above the midbody. I look on W3 but i still cant seem to grasp it. Any help would be greatly appreciated. HTML:

<!DOCTYPE HTML>
    <html>

    <head>
    <link type="css/text" rel="stylesheet" href="animate.css">
    <title>

    </title>
    </head>

    <body>
    <div class="Header">
        <div id="navbar">
            <ul>
            <li>Home</li>
            <li>About Us</li>
            <li>Contact Us</li>
            </ul>
        </div>
    </div>
    <div class="MidBody">
        <div id="leftbody"></div>
        <div id="rightbody"></div>
        <div id="lowerbody"></div>
    </div>
    <div class="footer"></div>

    </body>

    </html>

CSS:

.Header {
  width: calc(100%-16px);
  height: 100px;
  border-radius: 5px;
  background-color: transparent;
}
.MidBody {
  background-color: #141414;
  width: calc(100%-16px);
  height: 850px;
  margin-top: 3px;
  border-radius: 5px;
  position: relative;
}
.footer {
  background-color: #CCCCCC;
  width: calc(100%-16px);
  height: 50px;
  margin-top: 5px;
  border-radius: 5px;
}
#leftbody {
  background-color: #F1F1F1;
    width: 49%;
    height: 425px;
    left: 0;
    margin-top: 3px;
    margin-left: 3px;
    position: absolute;
    z-index: 1;
    border-radius: 5px;
    opacity: .25;
    }
    #rightbody {
    background-color: #F1F1F1;
    width: 49%;
    height: 425px;
    right: 0;
    margin-top: 3px;
    margin-right: 3px;
    position: absolute;
    z-index: 1;
    border-radius: 5px;
    opacity: .25;
    }
    #lowerbody {
    width: 99%;
    height: 49%;
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 432px;
    margin-bottom: 2px;
    border-radius: 5px;
    background-color: #F5F5F5;
    position: absolute;
    }

    body {
    background-image: url("http://www.freewebheaders.com/wordpress/wp-         content/gallery/love-emotions/i-love-you-nice-quotes-website-header.jpg");
    background-repeat: repeat;
    background-attachment: fixed;
    }

    li {
    display:inline;
    top: -35px;
    }

    #navbar {
    color: #F8F8F2;
    font-family: Arial Black;
    margin: auto;

    }

I looked at your code and it seems like it works. Please elaborate on what is wrong with what you have. — Elliot E, Mar 12 '16 at 19:35
@ElliotE Im trying to move my navigation bar and I do not know how to do it. — Derek Edwards, Mar 12 '16 at 19:36

score 0 · Accepted Answer · answered Mar 12 '16 at 19:36

Here is a Live Demo that centers your navbar both horizontally and vertically. text-align: center is used to align it horizontally, and line-height: 100px is used to center it vertically.

If you would like it centered on only one axis or the other, remove one of those two declarations.

.Header {
  width: calc(100%-16px);
  height: 100px;
  border-radius: 5px;
  background-color: red;
}

.MidBody {
  background-color: #141414;
  width: calc(100%-16px);
  height: 850px;
  margin-top: 3px;
  border-radius: 5px;
  position: relative;
}

.footer {
  background-color: #CCCCCC;
  width: calc(100%-16px);
  height: 50px;
  margin-top: 5px;
  border-radius: 5px;
}

#leftbody {
  background-color: #F1F1F1;
  width: 49%;
  height: 425px;
  left: 0;
  margin-top: 3px;
  margin-left: 3px;
  position: absolute;
  z-index: 1;
  border-radius: 5px;
  opacity: .25;
}

#rightbody {
  background-color: #F1F1F1;
  width: 49%;
  height: 425px;
  right: 0;
  margin-top: 3px;
  margin-right: 3px;
  position: absolute;
  z-index: 1;
  border-radius: 5px;
  opacity: .25;
}

#lowerbody {
  width: 99%;
  height: 49%;
  right: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 432px;
  margin-bottom: 2px;
  border-radius: 5px;
  background-color: #F5F5F5;
  position: absolute;
}

body {
  background-image: url("http://www.freewebheaders.com/wordpress/wp-content/gallery/love-emotions/i-love-you-nice-quotes-website-header.jpg");
  background-repeat: repeat;
  background-attachment: fixed;
}

ul {
  margin:0;
  padding:0;
}

li {
  display: inline;
  top: -35px;
}

#navbar {
  color: #F8F8F2;
  font-family: Arial Black;
  margin: auto;
  text-align: center;
  line-height: 100px;
}

<div class="Header">
  <div id="navbar">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Contact Us</li>
    </ul>
  </div>
</div>
<div class="MidBody">
  <div id="leftbody"></div>
  <div id="rightbody"></div>
  <div id="lowerbody"></div>
</div>
<div class="footer"></div>

@DerekEdwards In this case it has that effect. See [this answer](http://stackoverflow.com/a/8865463/2234742) for more versatile ways to vertically align your content, and the [MDN article on line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) to read up on what `line-height` does that has this effect. — Maximillian Laumeister, Mar 12 '16 at 19:48

How do I position my navigation bar?

1 Answers1