如何使用css在页面中心定位导航栏

时间：2015-12-11 15:24:41

标签： html css

您好我正在尝试创建一个网站，一切进展顺利，除了导航栏不会移动到屏幕中心，当我让导航栏占据整个页面时，它确实转到了中心但是我只希望导航栏尽可能大，但现在我不能让它进入页面的中心。

以下是我的代码：

body {
display: block;
margin: 0;
padding: 0px;
}

#header {
background-color: #b9fee2;
width: 1920px;
height: 200px;
display: inline-block;
}

h1 {
font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
font-size: 75px;
font-weight: 500;
text-align: center;
margin: 0px;
color: #000000;
text-decoration: none;
}

h1 a{
text-decoration: none;
}

h1 a:visited {
color: #000000;
text-decoration: none;
}

#nav {
display: inline-block;
-webkit-padding-start: 0px;
text-align: center;
margin: auto;
width: 35%;
}

#nav li {
display: inline-block;
vertical-align: top;
}

#nav a {
-webkit-transition: background-color 0.2s linear;
}

#nav a:link {
display: block;
text-align: center;
color: #000000;
text-decoration: none;
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 50px;
padding-right: 50px;
}

#nav a:visited {
color: #000000;
}

#nav a:hover {
display: block;
text-align: center;
color: #000000;
background-color: #FFFFFF;
text-decoration: none;
padding-left: 50px;
padding-right: 50px;
font-size: 30px;
}
#circle {
padding-top: 25px;
}

#webInfo {
padding-top: 10px;
text-align: center;
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 25px;
}

#webInfo p{
padding: 0px;
margin: 
}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML         4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>My Portfolio - Home</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <div id="header">
        <h1><a href="index.html">Alex Trotter</a></h1>
        <ul id="nav">
            <li><a href="index.html">Home</a></li>
            <img id="circle" src="images/circle.png"/>
            <li><a href="about.html">About Me</a></li>
            <img id="circle" src="images/circle.png"/>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>
    <div id="content">
        <div id="webInfo">
            <p>Hi, my name is Alex Trotter and this is my portfolio website</p>
            <p>below you will find some of work that I have created.</p>
            <p>Above you can navigate to different pages to learn more about me.</p>
        </div>
        <div id="exampleWork1"></div>
        <div id="exampleWork2"></div>
        <div id="exampleWork3"></div>
    </div>
</body>

段：

＆＃13;
＆＃13; 
body {
  display: block;
  margin: 0;
  padding: 0px;
}
#header {
  background-color: #b9fee2;
  width: 1920px;
  height: 200px;
  display: inline-block;
}
h1 {
  font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
  font-size: 75px;
  font-weight: 500;
  text-align: center;
  margin: 0px;
  color: #000000;
  text-decoration: none;
}
h1 a {
  text-decoration: none;
}
h1 a:visited {
  color: #000000;
  text-decoration: none;
}
#nav {
  display: inline-block;
  -webkit-padding-start: 0px;
  text-align: center;
  margin: auto;
  width: 35%;
}
#nav li {
  display: inline-block;
  vertical-align: top;
}
#nav a {
  -webkit-transition: background-color 0.2s linear;
}
#nav a:link {
  display: block;
  text-align: center;
  color: #000000;
  text-decoration: none;
  font-family: Georgia, Times, 'Times New Roman', serif;
  font-size: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 50px;
  padding-right: 50px;
}
#nav a:visited {
  color: #000000;
}
#nav a:hover {
  display: block;
  text-align: center;
  color: #000000;
  background-color: #FFFFFF;
  text-decoration: none;
  padding-left: 50px;
  padding-right: 50px;
  font-size: 30px;
}
#circle {
  padding-top: 25px;
}
#webInfo {
  padding-top: 10px;
  text-align: center;
  font-family: Georgia, Times, 'Times New Roman', serif;
  font-size: 25px;
}
#webInfo p {
  padding: 0px;
  margin:
}
＆＃13; 
<div id="header">
  <h1><a href="index.html">Alex Trotter</a></h1>
  <ul id="nav">
    <li><a href="index.html">Home</a>
    </li>
    <img id="circle" src="images/circle.png" />
    <li><a href="about.html">About Me</a>
    </li>
    <img id="circle" src="images/circle.png" />
    <li><a href="contact.html">Contact</a>
    </li>
  </ul>
</div>
<div id="content">
  <div id="webInfo">
    <p>Hi, my name is Alex Trotter and this is my portfolio website</p>
    <p>below you will find some of work that I have created.</p>
    <p>Above you can navigate to different pages to learn more about me.</p>
  </div>
  <div id="exampleWork1"></div>
  <div id="exampleWork2"></div>
  <div id="exampleWork3"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

提前致谢！ ：）

7 个答案:

答案 0 :(得分：3)

您可以将width: 100%设置为#nav。但你的HTML无效：

  

ul ：允许内容零个或多个li元素，最终混合使用    和元素。

我在img中移动li个元素。另外，id必须是唯一的使用类（我将id #circle的元素更改为.circle也更新您的css）img元素必须具有title和alt属性。正确的版本：

body {
  display: block;
  margin: 0;
  padding: 0px;
}
#header {
  background-color: #b9fee2;
  width: 1920px;
  height: 200px;
  display: inline-block;
}
h1 {
  font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
  font-size: 75px;
  font-weight: 500;
  text-align: center;
  margin: 0px;
  color: #000000;
  text-decoration: none;
}
h1 a {
  text-decoration: none;
}
h1 a:visited {
  color: #000000;
  text-decoration: none;
}
#nav {
  display: inline-block;
  -webkit-padding-start: 0px;
  text-align: center;
  margin: auto;
  width: 100%;
}
#nav li {
  display: inline-block;
  vertical-align: top;
}
#nav a {
  -webkit-transition: background-color 0.2s linear;
}
#nav a:link {
  display: block;
  text-align: center;
  color: #000000;
  text-decoration: none;
  font-family: Georgia, Times, 'Times New Roman', serif;
  font-size: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 50px;
  padding-right: 50px;
}
#nav a:visited {
  color: #000000;
}
#nav a:hover {
  display: block;
  text-align: center;
  color: #000000;
  background-color: #FFFFFF;
  text-decoration: none;
  padding-left: 50px;
  padding-right: 50px;
  font-size: 30px;
}
.circle {
  padding-top: 25px;
}
#webInfo {
  padding-top: 10px;
  text-align: center;
  font-family: Georgia, Times, 'Times New Roman', serif;
  font-size: 25px;
}
#webInfo p {
  padding: 0px;
  margin:
}
<div id="header">
  <h1><a href="index.html">Alex Trotter</a></h1>
  <ul id="nav">
    <li><a href="index.html">Home</a>
      <img class="circle" title="circle" alt="circle" src="images/circle.png" />
    </li>
    <li><a href="about.html">About Me</a>
      <img class="circle" title="circle" alt="circle" src="images/circle.png" />
    </li>
    <li><a href="contact.html">Contact</a>
    </li>
  </ul>
</div>
<div id="content">
  <div id="webInfo">
    <p>Hi, my name is Alex Trotter and this is my portfolio website</p>
    <p>below you will find some of work that I have created.</p>
    <p>Above you can navigate to different pages to learn more about me.</p>
  </div>
  <div id="exampleWork1"></div>
  <div id="exampleWork2"></div>
  <div id="exampleWork3"></div>
</div>

OP代码解决方案：

body {
  display: block;
  margin: 0;
  padding: 0px;
}
#header {
  background-color: #b9fee2;
  width: 1920px;
  height: 200px;
  display: inline-block;
}
h1 {
  font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
  font-size: 75px;
  font-weight: 500;
  text-align: center;
  margin: 0px;
  color: #000000;
  text-decoration: none;
}
h1 a {
  text-decoration: none;
}
h1 a:visited {
  color: #000000;
  text-decoration: none;
}
#nav {
  display: inline-block;
  -webkit-padding-start: 0px;
  text-align: center;
  margin: auto;
  width: 100%;
}
#nav li {
  display: inline-block;
  vertical-align: top;
}
#nav a {
  -webkit-transition: background-color 0.2s linear;
}
#nav a:link {
  display: block;
  text-align: center;
  color: #000000;
  text-decoration: none;
  font-family: Georgia, Times, 'Times New Roman', serif;
  font-size: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 50px;
  padding-right: 50px;
}
#nav a:visited {
  color: #000000;
}
#nav a:hover {
  display: block;
  text-align: center;
  color: #000000;
  background-color: #FFFFFF;
  text-decoration: none;
  padding-left: 50px;
  padding-right: 50px;
  font-size: 30px;
}
#circle {
  padding-top: 25px;
}
#webInfo {
  padding-top: 10px;
  text-align: center;
  font-family: Georgia, Times, 'Times New Roman', serif;
  font-size: 25px;
}
#webInfo p {
  padding: 0px;
  margin:
}
<div id="header">
  <h1><a href="index.html">Alex Trotter</a></h1>
  <ul id="nav">
    <li><a href="index.html">Home</a>
    </li>
    <img id="circle" src="images/circle.png" />
    <li><a href="about.html">About Me</a>
    </li>
    <img id="circle" src="images/circle.png" />
    <li><a href="contact.html">Contact</a>
    </li>
  </ul>
</div>
<div id="content">
  <div id="webInfo">
    <p>Hi, my name is Alex Trotter and this is my portfolio website</p>
    <p>below you will find some of work that I have created.</p>
    <p>Above you can navigate to different pages to learn more about me.</p>
  </div>
  <div id="exampleWork1"></div>
  <div id="exampleWork2"></div>
  <div id="exampleWork3"></div>
</div>

参考文献

ul

答案 1 :(得分：1)

只需添加：

div#header {
text-align: center;
}

答案 2 :(得分：1)

将ul设置为块并设置margin：auto以使ul的li元素居中

#nav{

 margin:auto;
  display:block;
}

http://jsfiddle.net/ardieziff/kqy985by/

答案 3 :(得分：1)

你也可以像这样制作你的#nav css，以达到你想要的结果。

#nav {
  text-align: center;
}

答案 4 :(得分：1)

我稍微更改了你的代码..将你的#nav更改为100％宽度并编辑了#nav项的HTML（移动锚标签内的图像）看看这是什么你的意思是：http://codepen.io/dirkpennings/pen/vLNYmx

答案 5 :(得分：1)

为什么需要#nav的display: inline-block属性？只需将其移除，导航就会居中。

答案 6 :(得分：1)

将这两个简单的 CSS 规则添加到#nav：

margin: 0 auto;
display: block;

JSFiddle Demo

相关问题
最新问题