Question

我正在尝试在我的页面上水平居中我的导航菜单，我尝试了文本：对齐和边距：0并显示：内联，但没有任何效果。我想我知道问题是什么。我实际上并没有试图将文本集中在块中;我已经做到了。我试图将块放在页面中心，这样它们就是一条完全居中的直线。正如您所看到的，我的导航菜单不是一条线，而是一系列的块都包含在同一个＆＃34; ul＆＃34;元件。所以我的问题是，如何让这些块在页面上以直线水平居中？我已经在从Html到Css文档的文件夹路径中放置了双星号，因此如果您运行它，您可以将其更改为在计算机上保存的位置。

我的CSS：

body {
  width: 75%;
  min-width: 720px;
  margin: 0 auto;
  /*vertical center*/
  font-size: 1em;
  font-weight: bold;
  font-family: "Century Gothic", Palatino, Georgia, Serif;
  color: #02849D;
  /*dark navy blue*/
  text-align: left;
  /*Personal Addition*/
  background-image: url('../Images/Black_Rainbow.jpg');
  background-size: 175% 100%;
  /*mess with*/
  background-repeat: no-repeat;
  /*boxing, borders, and padding*/
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.35em;
  border-style: double;
  border-color: #006E5F;
  border-width: 4px;
  border-width: 4px;
}

h1 {
  font-family: Rockwell, Baskerville, Warnock, Serif;
  font-size: 2.2em;
  font-weight: bold;
  color: #02849D;
  text-align: center;
  padding: 0.75em;
  border-style: solid;
  border-color: #006E5F;
  border-width: 4px;
}

h2, h3 {
  font-family: Rockwell, Baskerville, Warnock, Serif;
  font-size: 1.5em;
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.5em;
  border-style: solid;
  border-color: #006E5F;
  border-width: 3px;
  margin: 1em;
}
.box {
  /*a class tag that I use for my div elements, since I didn't want this to apply for all of my div elements I made a class so that I can easily state whether or not it should apply*/
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.35em;
  border-style: solid;
  border-color: #006E5F;
  border-width: 3px;
  margin: 1em;
  background-color: #111111;
}

p {
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.35em;
  border-style: solid;
  border-color: #00594D;
  border-width: 5px;
  margin: 1em;
}

ul {
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.35em;
  border-style: solid;
  border-color: #00594D;
  border-width: 5px;
  margin: 0.35em;
}

table {
  border: 0.2em solid black;
  background-color: white;
}

th {
  border: 0.15em solid black;
  padding: 0.35em;
  text-align: center;
  font-weight: bolder;
}

td {
  border: 1px solid black;
  padding: 0.35em;
  color: black;
  font-weight: normal;
}

a:link {
  color: #31AEC5;
  /*dark blue*/
}

a:visited {
  color: #015261;
  /*darker blue*/
}

a:hover,
a:focus {
  color: #505050;
  /*grey*/
}

nav {
  clear: left;
  font-size: 1.2em;
}

.gamebutton {
  background-color: #707070;
  /*grey*/
  border: none;
  color: #02849D;
  /*bright blue*/
  width: 450px;
  height: 75px;
  text-align: center;
  line-height: 75px;
  /*centers the text vertically*/
  text-decoration: none;
  display: inline-block;
  font-size: 1.1em;
  font-family: Century Gothic;
  font-weight: bold;
}

.info {
  width: 40%;
  font-size: 1.25em;
  float: left;
}

.temp {
  font-style: italic;
}

#main {
  color: #008B8B;
  clear: left;
}

#overview {
  color: #7FFFD4;
}

#overview:first-letter {
  font-size: 1.3em;
  font-family: "Times New Roman", sans-serif;
}

#DigDug {
  float: right;
  position: absolute;
  right: 0;
  border-width: 0;
}

#DigCaption {
  position: absolute;
  left: 833.5px;
  bottom: 10px;
  font-size: 13px;
}

#BlockGame {
  float: right;
  position: absolute;
  right: 550px;
  border-width: 0;
}

#skipnav {
  position: relative;
  right: 12.5%;
  width: 10.5em;
}


/* navigation menu styles */

nav ul {
  list-style-type: none;
  border: 0;
  padding-bottom: 1em;
}

nav ul li {
  float: left;
  margin-right: 1em;
}

nav ul li a {
  padding: 0.125em 0.5985243em;
  text-decoration: none;
  /* no underline */
  background-color: #55FA99;
  /* dark green */
  border: 2px solid black;
  border-top-left-radius: 1em 1em;
  /* rounded corner! */
  border-top-right-radius: 1em 1em;
  /* another rounded corner! */
}

nav ul li a:hover,
nav ul li a:focus {
  color: #014C65;
  background-color: #006E5F;
  /*medium green*/
  font-weight: bold;
}

.nav_menu {
  border: 0;
}

我的HTML：

<!DOCTYPE html>
<html lang="en">
   <head>
   <link type="text/css" rel="stylesheet" href="Style.css" media="screen">
  <link rel="icon" href="Images/favicon-16x16.png" type="image/png">
  <title>Web Portfolio: Patrick White's Index Page</title>
   </head>
   <body>
<div class="box" id="skipnav">
  <a href="#main">Skip to main content</a>
</div>
<h1>Patrick White Web Portfolio</h1>
<div class="info">
  <ul>
    <li>Patrick White</li>
    <li><a href="mailto:TotallyRealEmail@GOATS.com">TotallyRealEmail@GOATS.com</a></li>
    <li>843-653-3474</li>
    <li>link to one of my favourite <a href="http://eelslap.com/" target="_blank">websites</a></li>
    <li>If you like goats, download my presentation! In either: <a href="Images/GOATS.pdf" download>PDF</a>, <a href="Images/GOATS_VIDEO.wmv" download>Video</a>, <a href="Images/GOATS.odp">Open Office</a> or <a href="Images/GOATS.ppt">Microsoft Powerpoint</a></li>
  </ul>
</div>
<div class="info">
  <ul>
    <li>I.T. 9 (1-2)</li>
    <li>Mr. Gabriel Jones</li>
    <li>Web Design</li>
    <li><a href="http://go.vsb.bc.ca/schools/pointgrey/Pages/Default.aspx" target="_blank">Point Grey Secondary</a>, 2016-2017</li>
  </ul>
</div>
<div class="nav_menu">
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="Accesibility.html">Accessibility</a></li>
      <li><a href="Usability.html">Usability</a></li>
      <li><a href="Graphics.html">Graphics</a></li>
      <li><a href="JavaScript.html">JavaScript</a></li>
      <li><a href="Tools.html">Tools</a></li>
      <li><a href="Video.html">Video</a></li>
      <li><a href="Games.html">Games</a></li>
    </ul>
  </nav>
</div>
<div>
  <main id="main">
    <p id="overview">This web portfolio includes examples of my works in Mr. Jones' Web Design class. It also includes my reflections (below) in what I learned with each unit of the course.</p>
    <h2>Unit 2</h2>
    <p>In this section, I learned the basics of a fundamental scripting language for website design; <i>HTML5</i>. I learned about some of the many tags that are useful in the design of websites that will assist me in my prospective career in web design.
      In this unit I was presented with many resources to ensure that my HTML code was formatted correctly and was error-free, in the form of online generators. We also learned a great deal about how to incorporate links and images into our file, of which
      I found particularly interesting. In this section we learned a lot about how to input the actual content of our websites, and I am very excited for the future units in which we get to further design this content to seem visually appealing.</p>
    <h2>Unit 3</h2>
    <p class="temp">This section will be completed soon</p>
    <h2>Unit 4</h2>
    <p class="temp">This section will be completed soon</p>
    <h2>Unit 5</h2>
    <p class="temp">This section will be completed soon</p>
    <h2>Unit 6</h2>
    <p class="temp">This section will be completed soon</p>
    <h2>Unit 7</h2>
    <p class="temp">This section will be completed soon</p>
  </main>
</div>
<a href="http://www.coolmath-games.com/0-me-and-the-key" target="blank" class="gamebutton">Click to Play One of My Favourite Games!</a>
<!--Game Button-->
</body>
</html>

Answer 1

将text-align: center;添加到您的.nav-menu课程。

将display: inline-block;添加到您的nav元素。

说明：inline-block使您的nav元素仅为其子元素的大小，而不是其父元素的整个宽度。然后，将.nav-menu的内容居中，告诉.nav-menu让其子女居中，包括nav。

＆＃13;

/*CSS file - Patrick White*/

body {
  width: 75%;
  min-width: 720px;
  margin: 0 auto;
  /*vertical center*/
  font-size: 1em;
  font-weight: bold;
  font-family: "Century Gothic", Palatino, Georgia, Serif;
  color: #02849D;
  /*dark navy blue*/
  text-align: left;
  /*Personal Addition*/
  background-image: url('../Images/Black_Rainbow.jpg');
  background-size: 175% 100%;
  /*mess with*/
  background-repeat: no-repeat;
  /*boxing, borders, and padding*/
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.35em;
  border-style: double;
  border-color: #006E5F;
  border-width: 4px;
  border-width: 4px;
}

h1 {
  font-family: Rockwell, Baskerville, Warnock, Serif;
  font-size: 2.2em;
  font-weight: bold;
  color: #02849D;
  text-align: center;
  padding: 0.75em;
  border-style: solid;
  border-color: #006E5F;
  border-width: 4px;
}

h2,
h3 {
  font-family: Rockwell, Baskerville, Warnock, Serif;
  font-size: 1.5em;
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.5em;
  border-style: solid;
  border-color: #006E5F;
  border-width: 3px;
  margin: 1em;
}

.box {
  /*a class tag that I use for my div elements, since I didn't want this to apply for all of my div elements I made a class so that I can easily state whether or not it should apply*/
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.35em;
  border-style: solid;
  border-color: #006E5F;
  border-width: 3px;
  margin: 1em;
  background-color: #111111;
}

p {
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.35em;
  border-style: solid;
  border-color: #00594D;
  border-width: 5px;
  margin: 1em;
}

ul {
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.35em;
  border-style: solid;
  border-color: #00594D;
  border-width: 5px;
  margin: 0.35em;
}

table {
  border: 0.2em solid black;
  background-color: white;
}

th {
  border: 0.15em solid black;
  padding: 0.35em;
  text-align: center;
  font-weight: bolder;
}

td {
  border: 1px solid black;
  padding: 0.35em;
  color: black;
  font-weight: normal;
}

a:link {
  color: #31AEC5;
  /*dark blue*/
}

a:visited {
  color: #015261;
  /*darker blue*/
}

a:hover,
a:focus {
  color: #505050;
  /*grey*/
}

nav {
  clear: left;
  display: inline-block;
  font-size: 1.2em;
}

.gamebutton {
  background-color: #707070;
  /*grey*/
  border: none;
  color: #02849D;
  /*bright blue*/
  width: 450px;
  height: 75px;
  text-align: center;
  line-height: 75px;
  /*centers the text vertically*/
  text-decoration: none;
  display: inline-block;
  font-size: 1.1em;
  font-family: Century Gothic;
  font-weight: bold;
}

.info {
  width: 40%;
  font-size: 1.25em;
  float: left;
}

.temp {
  font-style: italic;
}

#main {
  color: #008B8B;
  clear: left;
}

#overview {
  color: #7FFFD4;
}

#overview:first-letter {
  font-size: 1.3em;
  font-family: "Times New Roman", sans-serif;
}

#DigDug {
  float: right;
  position: absolute;
  right: 0;
  border-width: 0;
}

#DigCaption {
  position: absolute;
  left: 833.5px;
  bottom: 10px;
  font-size: 13px;
}

#BlockGame {
  float: right;
  position: absolute;
  right: 550px;
  border-width: 0;
}

#skipnav {
  position: relative;
  right: 12.5%;
  width: 10.5em;
}


/* navigation menu styles */

nav ul {
  list-style-type: none;
  border: 0;
  padding-bottom: 1em;
}

nav ul li {
  float: left;
  margin-right: 1em;
}

nav ul li a {
  padding: 0.125em 0.5985243em;
  text-decoration: none;
  /* no underline */
  background-color: #55FA99;
  /* dark green */
  border: 2px solid black;
  border-top-left-radius: 1em 1em;
  /* rounded corner! */
  border-top-right-radius: 1em 1em;
  /* another rounded corner! */
}

nav ul li a:hover,
nav ul li a:focus {
  color: #014C65;
  background-color: #006E5F;
  /*medium green*/
  font-weight: bold;
}

.nav_menu {
  border: 0;
  text-align: center;
}

＆＃13;

<div class="box" id="skipnav">
  <a href="#main">Skip to main content</a>
</div>
<h1>Patrick White Web Portfolio</h1>
<div class="info">
  <ul>
    <li>Patrick White</li>
    <li><a href="mailto:TotallyRealEmail@GOATS.com">TotallyRealEmail@GOATS.com</a></li>
    <li>843-653-3474</li>
    <li>link to one of my favourite <a href="http://eelslap.com/" target="_blank">websites</a></li>
    <li>If you like goats, download my presentation! In either: <a href="Images/GOATS.pdf" download>PDF</a>, <a href="Images/GOATS_VIDEO.wmv" download>Video</a>, <a href="Images/GOATS.odp">Open Office</a> or <a href="Images/GOATS.ppt">Microsoft Powerpoint</a></li>
  </ul>
</div>
<div class="info">
  <ul>
    <li>I.T. 9 (1-2)</li>
    <li>Mr. Gabriel Jones</li>
    <li>Web Design</li>
    <li><a href="http://go.vsb.bc.ca/schools/pointgrey/Pages/Default.aspx" target="_blank">Point Grey Secondary</a>, 2016-2017</li>
  </ul>
</div>
<div class="nav_menu">
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="Accesibility.html">Accessibility</a></li>
      <li><a href="Usability.html">Usability</a></li>
      <li><a href="Graphics.html">Graphics</a></li>
      <li><a href="JavaScript.html">JavaScript</a></li>
      <li><a href="Tools.html">Tools</a></li>
      <li><a href="Video.html">Video</a></li>
      <li><a href="Games.html">Games</a></li>
    </ul>
  </nav>
</div>
<div>
  <main id="main">
    <p id="overview">This web portfolio includes examples of my works in Mr. Jones' Web Design class. It also includes my reflections (below) in what I learned with each unit of the course.</p>
    <h2>Unit 2</h2>
    <p>In this section, I learned the basics of a fundamental scripting language for website design; <i>HTML5</i>. I learned about some of the many tags that are useful in the design of websites that will assist me in my prospective career in web design.
      In this unit I was presented with many resources to ensure that my HTML code was formatted correctly and was error-free, in the form of online generators. We also learned a great deal about how to incorporate links and images into our file, of which
      I found particularly interesting. In this section we learned a lot about how to input the actual content of our websites, and I am very excited for the future units in which we get to further design this content to seem visually appealing.</p>
    <h2>Unit 3</h2>
    <p class="temp">This section will be completed soon</p>
    <h2>Unit 4</h2>
    <p class="temp">This section will be completed soon</p>
    <h2>Unit 5</h2>
    <p class="temp">This section will be completed soon</p>
    <h2>Unit 6</h2>
    <p class="temp">This section will be completed soon</p>
    <h2>Unit 7</h2>
    <p class="temp">This section will be completed soon</p>
  </main>
</div>
<a href="http://www.coolmath-games.com/0-me-and-the-key" target="blank" class="gamebutton">Click to Play One of My Favourite Games!</a>
<!--Game Button-->

＆＃13;

Answer 2

在nav ul li添加display: inline-block;而非浮动。之后，您可以使用text-align上的nav ul对齐它。查看下面的更新代码段：

＆＃13;

/*CSS file - Patrick White*/

body {
  width: 75%;
  min-width: 720px;
  margin: 0 auto;
  /*vertical center*/
  font-size: 1em;
  font-weight: bold;
  font-family: "Century Gothic", Palatino, Georgia, Serif;
  color: #02849D;
  /*dark navy blue*/
  text-align: left;
  /*Personal Addition*/
  background-image: url('../Images/Black_Rainbow.jpg');
  background-size: 175% 100%;
  /*mess with*/
  background-repeat: no-repeat;
  /*boxing, borders, and padding*/
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.35em;
  border-style: double;
  border-color: #006E5F;
  border-width: 4px;
  border-width: 4px;
}

h1 {
  font-family: Rockwell, Baskerville, Warnock, Serif;
  font-size: 2.2em;
  font-weight: bold;
  color: #02849D;
  text-align: center;
  padding: 0.75em;
  border-style: solid;
  border-color: #006E5F;
  border-width: 4px;
}

h2,
h3 {
  font-family: Rockwell, Baskerville, Warnock, Serif;
  font-size: 1.5em;
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.5em;
  border-style: solid;
  border-color: #006E5F;
  border-width: 3px;
  margin: 1em;
}

.box {
  /*a class tag that I use for my div elements, since I didn't want this to apply for all of my div elements I made a class so that I can easily state whether or not it should apply*/
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.35em;
  border-style: solid;
  border-color: #006E5F;
  border-width: 3px;
  margin: 1em;
  background-color: #111111;
}

p {
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.35em;
  border-style: solid;
  border-color: #00594D;
  border-width: 5px;
  margin: 1em;
}

ul {
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.35em;
  border-style: solid;
  border-color: #00594D;
  border-width: 5px;
  margin: 0.35em;
}

table {
  border: 0.2em solid black;
  background-color: white;
}

th {
  border: 0.15em solid black;
  padding: 0.35em;
  text-align: center;
  font-weight: bolder;
}

td {
  border: 1px solid black;
  padding: 0.35em;
  color: black;
  font-weight: normal;
}

a:link {
  color: #31AEC5;
  /*dark blue*/
}

a:visited {
  color: #015261;
  /*darker blue*/
}

a:hover,
a:focus {
  color: #505050;
  /*grey*/
}

nav {
  clear: left;
  font-size: 1.2em;
}

.gamebutton {
  background-color: #707070;
  /*grey*/
  border: none;
  color: #02849D;
  /*bright blue*/
  width: 450px;
  height: 75px;
  text-align: center;
  line-height: 75px;
  /*centers the text vertically*/
  text-decoration: none;
  display: inline-block;
  font-size: 1.1em;
  font-family: Century Gothic;
  font-weight: bold;
}

.info {
  width: 40%;
  font-size: 1.25em;
  float: left;
}

.temp {
  font-style: italic;
}

#main {
  color: #008B8B;
  clear: left;
}

#overview {
  color: #7FFFD4;
}

#overview:first-letter {
  font-size: 1.3em;
  font-family: "Times New Roman", sans-serif;
}

#DigDug {
  float: right;
  position: absolute;
  right: 0;
  border-width: 0;
}

#DigCaption {
  position: absolute;
  left: 833.5px;
  bottom: 10px;
  font-size: 13px;
}

#BlockGame {
  float: right;
  position: absolute;
  right: 550px;
  border-width: 0;
}

#skipnav {
  position: relative;
  right: 12.5%;
  width: 10.5em;
}


/* navigation menu styles */

nav ul {
  list-style-type: none;
  border: 0;
  padding-bottom: 1em;
  text-align: center;
}

nav ul li {
  display: inline-block;
  margin-right: 1em;
}

nav ul li a {
  padding: 0.125em 0.5985243em;
  text-decoration: none;
  /* no underline */
  background-color: #55FA99;
  /* dark green */
  border: 2px solid black;
  border-top-left-radius: 1em 1em;
  /* rounded corner! */
  border-top-right-radius: 1em 1em;
  /* another rounded corner! */
}

nav ul li a:hover,
nav ul li a:focus {
  color: #014C65;
  background-color: #006E5F;
  /*medium green*/
  font-weight: bold;
}

.nav_menu {
  border: 0;
}

＆＃13;

<div class="box" id="skipnav">
  <a href="#main">Skip to main content</a>
</div>
<h1>Patrick White Web Portfolio</h1>
<div class="info">
  <ul>
    <li>Patrick White</li>
    <li><a href="mailto:TotallyRealEmail@GOATS.com">TotallyRealEmail@GOATS.com</a></li>
    <li>843-653-3474</li>
    <li>link to one of my favourite <a href="http://eelslap.com/" target="_blank">websites</a></li>
    <li>If you like goats, download my presentation! In either: <a href="Images/GOATS.pdf" download>PDF</a>, <a href="Images/GOATS_VIDEO.wmv" download>Video</a>, <a href="Images/GOATS.odp">Open Office</a> or <a href="Images/GOATS.ppt">Microsoft Powerpoint</a></li>
  </ul>
</div>
<div class="info">
  <ul>
    <li>I.T. 9 (1-2)</li>
    <li>Mr. Gabriel Jones</li>
    <li>Web Design</li>
    <li><a href="http://go.vsb.bc.ca/schools/pointgrey/Pages/Default.aspx" target="_blank">Point Grey Secondary</a>, 2016-2017</li>
  </ul>
</div>
<div class="nav_menu">
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="Accesibility.html">Accessibility</a></li>
      <li><a href="Usability.html">Usability</a></li>
      <li><a href="Graphics.html">Graphics</a></li>
      <li><a href="JavaScript.html">JavaScript</a></li>
      <li><a href="Tools.html">Tools</a></li>
      <li><a href="Video.html">Video</a></li>
      <li><a href="Games.html">Games</a></li>
    </ul>
  </nav>
</div>
<div>
  <main id="main">
    <p id="overview">This web portfolio includes examples of my works in Mr. Jones' Web Design class. It also includes my reflections (below) in what I learned with each unit of the course.</p>
    <h2>Unit 2</h2>
    <p>In this section, I learned the basics of a fundamental scripting language for website design; <i>HTML5</i>. I learned about some of the many tags that are useful in the design of websites that will assist me in my prospective career in web design.
      In this unit I was presented with many resources to ensure that my HTML code was formatted correctly and was error-free, in the form of online generators. We also learned a great deal about how to incorporate links and images into our file, of which
      I found particularly interesting. In this section we learned a lot about how to input the actual content of our websites, and I am very excited for the future units in which we get to further design this content to seem visually appealing.</p>
    <h2>Unit 3</h2>
    <p class="temp">This section will be completed soon</p>
    <h2>Unit 4</h2>
    <p class="temp">This section will be completed soon</p>
    <h2>Unit 5</h2>
    <p class="temp">This section will be completed soon</p>
    <h2>Unit 6</h2>
    <p class="temp">This section will be completed soon</p>
    <h2>Unit 7</h2>
    <p class="temp">This section will be completed soon</p>
  </main>
</div>
<a href="http://www.coolmath-games.com/0-me-and-the-key" target="blank" class="gamebutton">Click to Play One of My Favourite Games!</a>
<!--Game Button-->

＆＃13;

Answer 3

这是固定装置：

在导航上使用display:inline-block，在导航上使用text-align:center .. 这样可以解决问题。

nav ul {
  list-style-type: none;
  border: 0;
  padding-bottom: 1em;
  text-align:center;
  padding-bottom:0px;
}

nav ul li {
 /* float: left;*/
  margin-right: 1em;
  display:inline-block;
}

＆＃13;

/*CSS file - Patrick White*/

body {
  width: 75%;
  min-width: 720px;
  margin: 0 auto;
  /*vertical center*/
  font-size: 1em;
  font-weight: bold;
  font-family: "Century Gothic", Palatino, Georgia, Serif;
  color: #02849D;
  /*dark navy blue*/
  text-align: left;
  /*Personal Addition*/
  background-image: url('../Images/Black_Rainbow.jpg');
  background-size: 175% 100%;
  /*mess with*/
  background-repeat: no-repeat;
  /*boxing, borders, and padding*/
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.35em;
  border-style: double;
  border-color: #006E5F;
  border-width: 4px;
  border-width: 4px;
}

h1 {
  font-family: Rockwell, Baskerville, Warnock, Serif;
  font-size: 2.2em;
  font-weight: bold;
  color: #02849D;
  text-align: center;
  padding: 0.75em;
  border-style: solid;
  border-color: #006E5F;
  border-width: 4px;
}

h2,
h3 {
  font-family: Rockwell, Baskerville, Warnock, Serif;
  font-size: 1.5em;
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.5em;
  border-style: solid;
  border-color: #006E5F;
  border-width: 3px;
  margin: 1em;
}

.box {
  /*a class tag that I use for my div elements, since I didn't want this to apply for all of my div elements I made a class so that I can easily state whether or not it should apply*/
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.35em;
  border-style: solid;
  border-color: #006E5F;
  border-width: 3px;
  margin: 1em;
  background-color: #111111;
}

p {
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.35em;
  border-style: solid;
  border-color: #00594D;
  border-width: 5px;
  margin: 1em;
}

ul {
  margin-left: 10%;
  margin-right: 10%;
  padding: 0.35em;
  border-style: solid;
  border-color: #00594D;
  border-width: 5px;
  margin: 0.35em;
}

table {
  border: 0.2em solid black;
  background-color: white;
}

th {
  border: 0.15em solid black;
  padding: 0.35em;
  text-align: center;
  font-weight: bolder;
}

td {
  border: 1px solid black;
  padding: 0.35em;
  color: black;
  font-weight: normal;
}

a:link {
  color: #31AEC5;
  /*dark blue*/
}

a:visited {
  color: #015261;
  /*darker blue*/
}

a:hover,
a:focus {
  color: #505050;
  /*grey*/
}

nav {
  clear: left;
  font-size: 1.2em;
}

.gamebutton {
  background-color: #707070;
  /*grey*/
  border: none;
  color: #02849D;
  /*bright blue*/
  width: 450px;
  height: 75px;
  text-align: center;
  line-height: 75px;
  /*centers the text vertically*/
  text-decoration: none;
  display: inline-block;
  font-size: 1.1em;
  font-family: Century Gothic;
  font-weight: bold;
}

.info {
  width: 40%;
  font-size: 1.25em;
  float: left;
}

.temp {
  font-style: italic;
}

#main {
  color: #008B8B;
  clear: left;
}

#overview {
  color: #7FFFD4;
}

#overview:first-letter {
  font-size: 1.3em;
  font-family: "Times New Roman", sans-serif;
}

#DigDug {
  float: right;
  position: absolute;
  right: 0;
  border-width: 0;
}

#DigCaption {
  position: absolute;
  left: 833.5px;
  bottom: 10px;
  font-size: 13px;
}

#BlockGame {
  float: right;
  position: absolute;
  right: 550px;
  border-width: 0;
}

#skipnav {
  position: relative;
  right: 12.5%;
  width: 10.5em;
}


/* navigation menu styles */

nav ul {
  list-style-type: none;
  border: 0;
  padding-bottom: 1em;
  text-align: center;
  padding-bottom: 0px;
}

nav ul li {
  /* float: left;*/
  margin-right: 1em;
  display: inline-block;
}

nav ul li a {
  padding: 0.125em 0.5985243em;
  text-decoration: none;
  /* no underline */
  background-color: #55FA99;
  /* dark green */
  border: 2px solid black;
  border-top-left-radius: 1em 1em;
  /* rounded corner! */
  border-top-right-radius: 1em 1em;
  /* another rounded corner! */
}

nav ul li a:hover,
nav ul li a:focus {
  color: #014C65;
  background-color: #006E5F;
  /*medium green*/
  font-weight: bold;
}

.nav_menu {
  border: 0;
}

＆＃13;

<div class="box" id="skipnav">
  <a href="#main">Skip to main content</a>
</div>
<h1>Patrick White Web Portfolio</h1>
<div class="info">
  <ul>
    <li>Patrick White</li>
    <li><a href="mailto:TotallyRealEmail@GOATS.com">TotallyRealEmail@GOATS.com</a></li>
    <li>843-653-3474</li>
    <li>link to one of my favourite <a href="http://eelslap.com/" target="_blank">websites</a></li>
    <li>If you like goats, download my presentation! In either: <a href="Images/GOATS.pdf" download>PDF</a>, <a href="Images/GOATS_VIDEO.wmv" download>Video</a>, <a href="Images/GOATS.odp">Open Office</a> or <a href="Images/GOATS.ppt">Microsoft Powerpoint</a></li>
  </ul>
</div>
<div class="info">
  <ul>
    <li>I.T. 9 (1-2)</li>
    <li>Mr. Gabriel Jones</li>
    <li>Web Design</li>
    <li><a href="http://go.vsb.bc.ca/schools/pointgrey/Pages/Default.aspx" target="_blank">Point Grey Secondary</a>, 2016-2017</li>
  </ul>
</div>
<div class="nav_menu">
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="Accesibility.html">Accessibility</a></li>
      <li><a href="Usability.html">Usability</a></li>
      <li><a href="Graphics.html">Graphics</a></li>
      <li><a href="JavaScript.html">JavaScript</a></li>
      <li><a href="Tools.html">Tools</a></li>
      <li><a href="Video.html">Video</a></li>
      <li><a href="Games.html">Games</a></li>
    </ul>
  </nav>
</div>
<div>
  <main id="main">
    <p id="overview">This web portfolio includes examples of my works in Mr. Jones' Web Design class. It also includes my reflections (below) in what I learned with each unit of the course.</p>
    <h2>Unit 2</h2>
    <p>In this section, I learned the basics of a fundamental scripting language for website design; <i>HTML5</i>. I learned about some of the many tags that are useful in the design of websites that will assist me in my prospective career in web design.
      In this unit I was presented with many resources to ensure that my HTML code was formatted correctly and was error-free, in the form of online generators. We also learned a great deal about how to incorporate links and images into our file, of which
      I found particularly interesting. In this section we learned a lot about how to input the actual content of our websites, and I am very excited for the future units in which we get to further design this content to seem visually appealing.</p>
    <h2>Unit 3</h2>
    <p class="temp">This section will be completed soon</p>
    <h2>Unit 4</h2>
    <p class="temp">This section will be completed soon</p>
    <h2>Unit 5</h2>
    <p class="temp">This section will be completed soon</p>
    <h2>Unit 6</h2>
    <p class="temp">This section will be completed soon</p>
    <h2>Unit 7</h2>
    <p class="temp">This section will be completed soon</p>
  </main>
</div>
<a href="http://www.coolmath-games.com/0-me-and-the-key" target="blank" class="gamebutton">Click to Play One of My Favourite Games!</a>
<!--Game Button-->

＆＃13;

如何在CSS中水平居中我的导航菜单？

3 个答案: