Question

我刚刚开始了我的第一个练习网站，我似乎无法将导航栏放在我想要的位置。我希望它集中在中间正上方的标题中。我看着W3，但我似乎仍然无法掌握它。任何帮助将不胜感激。 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;

    }

Answer 1

这是一个实时演示，可以水平和垂直居中显示导航栏。 line-height: 100px用于水平对齐，.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 个答案: