Html 如何在我的网站上居中导航栏_Html_Css

Html 如何在我的网站上居中导航栏

html css

Html 如何在我的网站上居中导航栏,html,css,Html,Css,我已经查阅了很多教程，但我不知道如何在我的网站上集中ul列表 <!DOCTYPE HTML> <html lang="eng"> <head> <meta charset="utf-8"> <title>test website</title> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <!-- html5

我已经查阅了很多教程，但我不知道如何在我的网站上集中ul列表

<!DOCTYPE HTML>
<html lang="eng">
<head>
<meta charset="utf-8">
<title>test website</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">

<!-- html5.js for IE less than 9 -->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- css3-mediaqueries.js for IE less than 9 -->    
<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->


<link href="styles/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="pagewrap">
    <header id="header">

        <nav>
        <ul id="main-nav">
        <li><a href="#">test1</a></li>
        <li><a href="#">test2</a></li>
        <li><a href="#">test3</a></li>
        <li><a href="#">test4</a></li>
        <li><a href="#">test5</a></li>

        </ul>
        </nav>
     </header>   

</div>

</body>
</html>


/* CSS Document */

/*RESET*****************************/
html,body,div,h1,h2,p,img,nav{
margin:0;
padding:0;  
}


body{
background-color:#D1D1D1;
}

#pagewrap{
background-color:#FFF;
width:980px;
margin:60px auto auto;
padding: 10px;
-webkit-box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.15);
-moz-box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.15);
box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.15);
}

#header{
    position:relative;
    width:80%;
    height:180px;
}



/*.nav{
    position:absolute;
    text-align:center;
    top:100px;
}*/

#main-nav{
    position: absolute;
    text-align:center;
    margin:0; 
    padding:0;
    list-style-type:none;
    border: 2px solid red;
}



#main-nav li {
    margin: 0;
    padding: 0;
    display:block;
    float: left;

}

#main-nav a{
    text-decoration: none;
    text-align:center;
    padding:0 1em;
}


测试网站







/*CSS文档*/
/*重置*****************************/
html、正文、div、h1、h2、p、img、nav{
保证金：0；
填充：0；
}
身体{
背景色：#d1d1；
}
#换页{
背景色：#FFF；
宽度：980px；
保证金：60像素自动；
填充：10px；
-webkit盒阴影：0 3px2pRGBA（0,0,0,0.15）；
-moz盒阴影：0 3px2pRGBA（0,0,0,0.15）；
盒影：0.3px2pRGBA（0,0,0,0.15）；
}
#标题{
位置：相对位置；
宽度：80%；
高度：180像素；
}
/*.导航{
位置：绝对位置；
文本对齐：居中；
顶部：100px；
}*/
#主导航{
位置：绝对位置；
文本对齐：居中；
保证金：0；
填充：0；
列表样式类型：无；
边框：2倍纯红；
}
#主导航李{
保证金：0；
填充：0；
显示：块；
浮动：左；
}
#主导航a{
文字装饰：无；
文本对齐：居中；
填充：0.1em；
}

这是密码

我试着用.nav to将其居中，但没有成功。如果有人能提出更好的解决方案，我将不胜感激。我使用相对/绝对定位。仅仅通过相对定位就可以做到这一点吗。我计划用媒体查询进行响应式设计非常感谢：）

一个选项是：

谢谢：）我不知道导航组件，那是什么？还有其他解决方案吗？

nav

是您使用过的html元素，就像

div

或

，

span

，

table

，

等。如果您想用id命名它，可以使用：

\myID{width:1px；margin:0 auto；}

然后您需要使用：

。只有在HTML代码中有任何带有类“nav”的标记时，才能在css中调用nav，如

更好地了解css选择器、ID、类等的基础知识。

nav {
    width: 1px;
    margin: 0 auto;
}