如何在CSS中水平居中我的導航菜單？
[英]How do I horizontally center my Nav menu in CSS?
問題描述
我試圖在我的頁面上水平居中我的導航菜單，我嘗試了文本：對齊和邊距：0並顯示：內聯，但沒有任何作用。 我想我知道問題是什么。 我實際上並沒有嘗試將文本放在塊中; 我已經做到了。 我正試圖將塊放在頁面中心，這樣它們就是一條完全居中的直線。 正如您所看到的，我的導航菜單不是一行，而是一系列塊都包含在同一個“ul”元素中。 所以我的問題是，如何讓這些塊在頁面上以直線水平居中？ 我在文件夾路徑中放置了雙星號，從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>
3 個解決方案
解決方案1
0 已采納 2017-05-11 04:45:14
添加text-align: center; 到您的.nav-menu課程。
添加display: inline-block; 你的nav元素。
說明： inline-block使您的nav元素僅為其子元素的大小，而不是其父元素的整個寬度。 然后，以.nav-menu的內容為中心告訴.nav-menu將其子項居中，包括nav 。
/*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; }
<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>IT 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-->
解決方案2
0 2017-05-11 04:45:43
在nav ul li添加display: inline-block; 而不是漂浮。 之后，您可以使用nav ul上的text-align對齊它。 查看下面的更新代碼段：
/*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; }
<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>IT 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-->
解決方案3
0 2017-05-11 04:45:50
這是夾具：
使用display:inline-block對導航Li和text-align:center對NAV UL。 這將解決這個問題。
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;
}
/*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; }
<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>IT 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-->
如何在不手動設置寬度的情況下使導航欄水平居中？
[英]How do I horizontally center my nav bar without manually setting the width?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.