How do I position my navigation bar?

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;

    }

Answers


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>

Need Your Help

Appium automation not working correctly on intelx86 based emulator

android python android-emulator appium haxm

I have an automation script using appium-python-client which run fine on

What is the equivalent of MATLAB's corrplot() or R's pairs() in Octave?

r matlab octave correlation

R's pairs() displays the correlations between pairs of variables, here a graph example: