Question

目前我有一个标题，上面有我的导航栏。在我的编辑器中它是居中的，但是当我拉伸页面或以不同的格式查看它时，它似乎不会位于标题的中心顶部。关于我应该做什么的任何想法？

#nav{
    list-style-type: none;
    position:absolute;
    padding: 0;
    overflow: hidden;
    margin-top:-25px;
    margin-left:50px;
  }

#nav li{
  float:left;
}

#nav a:link, #nav a:visited {
  display: block;
  width: 120px;
  font-weight: bold;
  color: #FFFFFF;
  background-color: darkorange;
  text-align: center;
  padding: 4px;
  border:2px solid black;
  border-top-right-radius:10px;
  border-top-left-radius:10px;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom:none;
  
}

#nav a:hover{
  background-color: orangered;
}

#nav a:active{
  color:black;
}

#header{
  height:150px;
  background-color:darkred;
  margin-top:45px;
  border:2px solid black;
  border-radius:15px;
  overflow:hidden;
  position:relative;
}

#innerheader{
  background-color:burlywood;
  height:100px;
  margin-left:auto;
  margin-right:auto;
  overflow:hidden;
  width:50%;
  border-radius:25px;
  border:3px solid black;
  position:Relative;
  margin-top:22px;
}

#innerheader h1{
  position:relative;
  margin-left:auto;
  text-align:center;
  margin-top:30px;
  -webkit-text-stroke-width:0.6px;
  -webkit-text-stroke-color:black;
  color:saddlebrown;
}

 <body>
    <ul id="nav">
      <li><a href="Exe.com">Home</a></li>
      <li><a href="Exe.com">Photos</a></li>
      <li><a href="Exe.com">Statistics</a></li>
      <li><a href="Exe.com">Chat</a></li>
      <li><a href="Exe.com"> Biography </a></li>
    </ul>
    
    <div id="header">
      <div id="innerheader">
        <h1>
         General Information
        </h1>
      </div>
    </div>
  </body>

我提供的大部分内容对这个问题没有用处，我为此道歉，但我只想提供尽可能多的信息来获得帮助。谢谢！

Answer 1

您好现在尝试这个css

#nav {
    list-style-type: none;
    padding: 0;
    overflow: hidden;
    margin: 0 auto;
    display: block;
    text-align: center;
    font-size: 0;
}
#nav li {
    display: inline-block; // add this 
    font-size: 14px;    // add this 
}
#header {
    /* margin-top: 45px; */   // remove this line
}

<强>演示

＆＃13;

#nav {
list-style-type: none;
/* position: absolute; */
padding: 0;
overflow: hidden;
margin: 0 auto;
/* margin-left: 50px; */
display: block;
text-align: center;
font-size: 0;
}
#nav li {
display: inline-block;
font-size: 14px;
}
#header {
height: 150px;
background-color: darkred;
/* margin-top: 45px; */
border: 2px solid black;
border-radius: 15px;
overflow: hidden;
position: relative;
}

#nav a:link, #nav a:visited {
  display: block;
  width: 120px;
  font-weight: bold;
  color: #FFFFFF;
  background-color: darkorange;
  text-align: center;
  padding: 4px;
  border:2px solid black;
  border-top-right-radius:10px;
  border-top-left-radius:10px;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom:none;
  
}

#nav a:hover{
  background-color: orangered;
}

#nav a:active{
  color:black;
}


#innerheader{
  background-color:burlywood;
  height:100px;
  margin-left:auto;
  margin-right:auto;
  overflow:hidden;
  width:50%;
  border-radius:25px;
  border:3px solid black;
  position:Relative;
  margin-top:22px;
}

#innerheader h1{
  position:relative;
  margin-left:auto;
  text-align:center;
  margin-top:30px;
  -webkit-text-stroke-width:0.6px;
  -webkit-text-stroke-color:black;
  color:saddlebrown;
}

＆＃13;

 <body>
    <ul id="nav">
      <li><a href="Exe.com">Home</a></li>
      <li><a href="Exe.com">Photos</a></li>
      <li><a href="Exe.com">Statistics</a></li>
      <li><a href="Exe.com">Chat</a></li>
      <li><a href="Exe.com"> Biography </a></li>
    </ul>
    
    <div id="header">
      <div id="innerheader">
        <h1>
         General Information
        </h1>
      </div>
    </div>
  </body>

＆＃13;

Answer 2

将这些属性添加到现有类中。

#nav{
    list-style-type: none;
    position:absolute;
    padding: 0;
    overflow: hidden;
    margin-top:-25px;
    margin-left:50px;
    width:100%;
    text-align:center;
  }

#nav li{
  display:inline-block;
}

这应该可以解决您的问题。使导航栏占据全宽，并使用text-align:center;

水平居中内部内容

如何将此导航栏保持在中心位置？

2 个答案: