HTML& CSS:使Navbar居中

时间:2015-06-19 02:09:11

标签: html css center navbar

我已经找到了其他有类似问题的人,但我似乎无法找到适合我的答案。我试图将我的导航栏居中,但它一直被推到左侧。任何帮助,将不胜感激!感谢。



<!DOCTYPE html>
<html>

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

<body>
  <div class="image">
    <h1>Michael Leath</h1>
  </div>
  <div id="wrapper">
    <div class="navbar">
      <ul>
        <li><a href="#aboutme">About Me</a>
        </li>
        <li><a href="#contact">Contact</a>
        </li>
        <li><a href="#education">Eduation</a>
        </li>
        <li><a href="#background">Background</a>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>
&#13;
Private Sub AllowNumericonly(Byval CTRL As control)
    if not Isnumeric(ctrl.text) And Ctrl.test<> "" Then

       MSGbox("Please enter numbers only." , Vbinformation)
       ctrl.text = ""
       ctrl.focus()
     End if 
End sub
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:2)

您需要设置#wrapper select tti.* from $table_tester_config ttc inner join $table_tester_info tti on tti.board_id = ttc.board_id where td.device = '$device_name' and td.tester_type = '$tester_type' order by tti.tester_name 的宽度才能正常工作:)

margin: 0 auto
body {
  background-color: rgb(222, 243, 246);
  /* background-image: url("Capitola.jpg"); 
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: contain;
        margin: 0;
        padding: 0;
        border: 0;
    */
}
div.image {
  background-image: url("Capitola.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 100% 100%;
  margin: 0;
  padding: 0;
  border: 10 solid #021a40;
  position: absolute;
  height: 100%;
  width: 100%;
}
div#wrapper {
  position: fixed;
  text-align: center;
  z-index: 1000;
  margin: 0 auto;
  width: 100%;
}
.navbar ul {
  list-style-type: none;
  display: inline-block;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 500px;
  border: 1px solid black;
}
.navbar li {
  float: left;
  display: inline;
  text-align: center;
}
.navbar a {
  display: inline-block;
  font-weight: bold;
  width: 120px;
  color: black;
  background-color: rgb(254, 255, 241)
  /*rgb(219,243,245)*/
  ;
  text-align: center;
  padding: 10px;
  text-decoration: none;
}
.navbar a:hover {
  background-color: rgb(239, 162, 180);
}
h1 {
  font-family: Florence, cursive;
  margin-top: 8%;
  margin-left: 60%;
  color: white;
  font-size: 3.5em;
}

答案 1 :(得分:0)

在css文件中,更改

  

div#wrapper {         职位:固定;

作为

  

div#wrapper {         职位:中心;

然后就可以了。