如何定位导航栏？

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. 我看的是W3，但我似乎仍然无法掌握它。 Any help would be greatly appreciated. 任何帮助将不胜感激。 HTML: 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: 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;

    }

Answer 1

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. text-align: center用于水平对齐， line-height: 100px用于垂直居中。

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>

如何定位导航栏？

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-03-12 19:36:47

如何定位导航栏？

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-03-12 19:36:47

解决方案1
0 已采纳 2016-03-12 19:36:47