如何使用CSS在页面中央放置导航栏

亚历克斯96

嗨，我正在尝试创建一个网站，除了导航栏不会移动到屏幕的中心之外，其他一切都进行得很好，当我让导航栏占据整个页面时，它确实转到了中心，但是我只想要导航酒吧要尽可能大，但现在我无法将其放到页面的中央。

这是我的代码如下：

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>

片段：

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:
}

<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>

提前致谢！:)

亚历克斯·查尔

您可以设置width: 100%为#nav。但是您的html无效：

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

我在中移动img元素li。还id必须是唯一使用类，而不是（我改变的元素id #circle来.circle也更新您的CSS）和img元素必须有标题和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>

参考

这

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-04-8

我来说两句

0 条评论

登录后参与评论

上一篇：使用JavaScript代码创建复杂的JSON对象

如何使用CSS在页面中央放置导航栏

如何使用CSS在页面中央放置导航栏

Linux的官方Adobe Flash存储库是否已过时？

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

如何检查字符串输入的格式

如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是

Modbus Python施耐德PM5300

错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'

用日期数据透视表和日期顺序查询

检查嵌套列表中的长度是否相同

Java Eclipse中的错误13，如何解决？

ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）

如何监视应用程序而不是单个进程的CPU使用率？

如何自动选择正确的键盘布局？-仅具有一个键盘布局

ES5的代理替代

在令牌内联程序集错误之前预期为 ')'

有什么解决方案可以将android设备用作Cast Receiver？

套接字无法检测到断开连接

如何在JavaScript中获取数组的第n个元素？

如何将sklearn.naive_bayes与（多个）分类功能一起使用？

应用发明者仅从列表中选择一个随机项一次

在Windows 7中无法删除文件（2）

ggplot：对齐多个分面图-所有大小不同的分面