如何在我的横幅中插入和居中对齐我的徽标？

时间：2016-09-26 06:00:59

标签： html css

我无法在页面顶部的白色横幅内插入我的徽标。

我需要在代码中注意的是AuthenticatesUsers ID：

df = df.dropna(subset=['label'])

print (df)
   reference_word  all_matching_words   label review
10        airport       biz - airport  travel      N
11        airport       cfo - airport  travel      N
12        airport    cfomtg - airport  travel      N
13        airport   meeting - airport  travel      N
14        airport    summit - airport  travel      N
15        airport      taxi - airport  travel      N
16        airport     train - airport  travel      N
17        airport  transfer - airport  travel      N
18        airport      trip - airport  travel      N

请参阅我的JSFiddle链接：

谢谢:)

7 个答案:

答案 0 :(得分：3)

只需为徽标类添加此css：

.LogoFF1 {
  text-align: center;
  margin: 0;
}

＆＃13;
＆＃13; 
body {
  background-color: #101010;
}

header{
	height:50px;
    background:#F0F0F0;
    border:1px solid #CCC;
    width:960px;
    margin:0px auto;	
}

#header{
	height:150px;
    background:#F0F0F0;
    border:1px solid #CCC;
    width:960px;
    margin:0px auto;
	text-shadow: 6px 5px 4px #FF0000;
	font-size:130px;
	position: relative;
}

h2.main {
	font-size: 20px; 
	letter-spacing:1px; 
	text-align: center;
	text-shadow: 0px 0px 2px #2050FF,
				-2px -2px 2px #2050FF,
				 2px -2px 2px #2050FF,
				-2px 2px 2px #2050FF,
				 2px 2px 2px #2050FF;"
}

#section {
	max-width: 960px;
    color: #FFFFFF;
    padding:4px;	
     margin-top: auto;
     margin-bottom: auto;
     margin-right: auto;
     margin-left: auto;
	 padding-left: 220px;
    text-align: center; 
	letter-spacing: 1px;
}

#section2 {
	max-width: 1000px;
    color: #FFFFFF;
    padding:4px;	
     margin-top: auto;
     margin-bottom: auto;
     margin-right: auto;
     margin-left: auto;
	 padding-left: 220px;
    text-align: center; 
	letter-spacing: 1px;
	
}

.main-header {
  text-align: center;
  padding: 5px;
  padding-left: 300px;
  height: 160px;
  margin: left;
}
IMG.displayed {
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: left;
}
h1 {
  color: #ffffff;
}
div.wrapper {
  margin: 10px left;
  width: 250px;
  float: left;
}
nav.vertical {
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
  overflow: hidden;
  text-align: center;
}

nav.vertical > ul {
  padding: 0;
}

nav.vertical > ul > li {
  display: block;
}
nav.vertical > ul > li > label,
nav.vertical > ul > li > a {
  background: rgb(181,189,200); /* Old browsers */
  background: -moz-linear-gradient(top, rgb(181,189,200) 0%, rgb(130,140,149) 36%, rgb(40,52,59) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgb(181,189,200) 0%,rgb(130,140,149) 36%,rgb(40,52,59) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgb(181,189,200) 0%,rgb(130,140,149) 36%,rgb(40,52,59) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
  color: rgb(255, 255, 255);
  display: block;
  font-size: .85rem;
  font-weight: 500;
  height: 50px;
  line-height: 50px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  text-transform: uppercase;
  transition: all .1s ease;
  text-decoration: none;
}
nav.vertical > ul > li > label:hover,
nav.vertical > ul > li > a:hover {
  background-color: rgb(114, 51, 98);
  background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  cursor: pointer;
}
nav.vertical > ul > li > label + input {
  display: none;
  visability: hidden;
}
/* unvisited link */

a:link {
  color: #AAAAFF;
}
/* visited link */

a:visited {
  color: #DD04FF;
}
/* mouse over link */

a:hover {
  color: #FF0000;
}
/* selected link */

a:active {
  color: #FFCC00;
}
footer {
  color: #ffffff;
}
nav {
  background-color: dimgrey;
  border: 5px solid #333;
}
nav ul {
  nav ul: list-style-type: none;
}
nav li {
  padding: 2px;
  display: inline-block;
  border-right: 1px solid #fff;
}
nav li a:link {
  text-decoration: none: font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  font-family: sans-serif;
  font-size: 0.9em;
}
nav li:hover {
  background-color: teal;
}

.LogoFF1 { 
  text-align: center;
  margin: 0;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <title>About</title>
  <link rel="stylesheet" type="text/css" href="css/home.css">
  <meta charset="UTF-8">
</head>

<body>
  <main>
   <div id="header">
      <p class="LogoFF1">FF1 Site</p> 
    </div>
    <div class="wrapper">
      <nav class="vertical">
        <ul>
          <li>
            <a href="homePage.html">Home</a>
          </li>
          <li>
            <a href="profile.html">Profile</a> 
          </li>
          <li>
            <a href="personalBests.html">Personal Bests</a>
          </li>
          <li>
            <a href="links.html">Links</a>
          </li>
		  <li>
            <a href="about.html">About</a>
          </li>
        </ul>
      </nav>
    </div>
   <div id="section">
      <article>
        <h2>About</h2>
     <p>
	Hello there, and welcome to FireFalcons personal website!
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra rutrum massa vitae cursus.
	Integer condimentum sollicitudin tristique. Ut lectus mi, iaculis eget faucibus quis, tincidunt eu ligula.
	Aliquam id ornare dui. Nulla efficitur ipsum vitae magna ultricies placerat ullamcorper ut turpis.
	Ut sed malesuada nibh. Phasellus fringilla ex a eros volutpat consectetur.
	</p>
      </article>
    </div>
    <hr>
    <footer>
      <strong>
                Copyright &copy; 2016 Stephen Fawcett, All rights reserved
        </strong>
    </footer>
  </main>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

只需将此css添加到您的徽标

即可 
.LogoFF1 {
  margin-top: 0px;
  text-align: center;
}


body {
  background-color: #101010;
}

header{
	height:50px;
    background:#F0F0F0;
    border:1px solid #CCC;
    width:960px;
    margin:0px auto;	
}

#header{
	height:150px;
    background:#F0F0F0;
    border:1px solid #CCC;
    width:960px;
    margin:0px auto;
	text-shadow: 6px 5px 4px #FF0000;
	font-size:130px;
	position: relative;
}

h2.main {
	font-size: 20px; 
	letter-spacing:1px; 
	text-align: center;
	text-shadow: 0px 0px 2px #2050FF,
				-2px -2px 2px #2050FF,
				 2px -2px 2px #2050FF,
				-2px 2px 2px #2050FF,
				 2px 2px 2px #2050FF;"
}

#section {
	max-width: 960px;
    color: #FFFFFF;
    padding:4px;	
     margin-top: auto;
     margin-bottom: auto;
     margin-right: auto;
     margin-left: auto;
	 padding-left: 220px;
    text-align: center; 
	letter-spacing: 1px;
}

#section2 {
	max-width: 1000px;
    color: #FFFFFF;
    padding:4px;	
     margin-top: auto;
     margin-bottom: auto;
     margin-right: auto;
     margin-left: auto;
	 padding-left: 220px;
    text-align: center; 
	letter-spacing: 1px;
	
}

.main-header {
  text-align: center;
  padding: 5px;
  padding-left: 300px;
  height: 160px;
  margin: left;
}
IMG.displayed {
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: left;
}
h1 {
  color: #ffffff;
}
div.wrapper {
  margin: 10px left;
  width: 250px;
  float: left;
}
nav.vertical {
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
  overflow: hidden;
  text-align: center;
}

nav.vertical > ul {
  padding: 0;
}

nav.vertical > ul > li {
  display: block;
}
nav.vertical > ul > li > label,
nav.vertical > ul > li > a {
  background: rgb(181,189,200); /* Old browsers */
  background: -moz-linear-gradient(top, rgb(181,189,200) 0%, rgb(130,140,149) 36%, rgb(40,52,59) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgb(181,189,200) 0%,rgb(130,140,149) 36%,rgb(40,52,59) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgb(181,189,200) 0%,rgb(130,140,149) 36%,rgb(40,52,59) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
  color: rgb(255, 255, 255);
  display: block;
  font-size: .85rem;
  font-weight: 500;
  height: 50px;
  line-height: 50px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  text-transform: uppercase;
  transition: all .1s ease;
  text-decoration: none;
}
nav.vertical > ul > li > label:hover,
nav.vertical > ul > li > a:hover {
  background-color: rgb(114, 51, 98);
  background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  cursor: pointer;
}
nav.vertical > ul > li > label + input {
  display: none;
  visability: hidden;
}
/* unvisited link */

a:link {
  color: #AAAAFF;
}
/* visited link */

a:visited {
  color: #DD04FF;
}
/* mouse over link */

a:hover {
  color: #FF0000;
}
/* selected link */

a:active {
  color: #FFCC00;
}
footer {
  color: #ffffff;
}
nav {
  background-color: dimgrey;
  border: 5px solid #333;
}
nav ul {
  nav ul: list-style-type: none;
}
nav li {
  padding: 2px;
  display: inline-block;
  border-right: 1px solid #fff;
}
nav li a:link {
  text-decoration: none: font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  font-family: sans-serif;
  font-size: 0.9em;
}
nav li:hover {
  background-color: teal;
}

.LogoFF1 {
  
  margin-top: 0px;
  text-align: center;
}
<!DOCTYPE html>
<html>

<head>
  <title>About</title>
  <link rel="stylesheet" type="text/css" href="css/home.css">
  <meta charset="UTF-8">
</head>

<body>
  <main>
   <div id="header">
      <p class="LogoFF1">FF1 Site</p> 
    </div>
    <div class="wrapper">
      <nav class="vertical">
        <ul>
          <li>
            <a href="homePage.html">Home</a>
          </li>
          <li>
            <a href="profile.html">Profile</a> 
          </li>
          <li>
            <a href="personalBests.html">Personal Bests</a>
          </li>
          <li>
            <a href="links.html">Links</a>
          </li>
		  <li>
            <a href="about.html">About</a>
          </li>
        </ul>
      </nav>
    </div>
   <div id="section">
      <article>
        <h2>About</h2>
     <p>
	Hello there, and welcome to FireFalcons personal website!
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra rutrum massa vitae cursus.
	Integer condimentum sollicitudin tristique. Ut lectus mi, iaculis eget faucibus quis, tincidunt eu ligula.
	Aliquam id ornare dui. Nulla efficitur ipsum vitae magna ultricies placerat ullamcorper ut turpis.
	Ut sed malesuada nibh. Phasellus fringilla ex a eros volutpat consectetur.
	</p>
      </article>
    </div>
    <hr>
    <footer>
      <strong>
                Copyright &copy; 2016 Stephen Fawcett, All rights reserved
        </strong>
    </footer>
  </main>
</body>

</html>

答案 2 :(得分：1)

只需在.LogoFF1类

中添加此css即可 
.LogoFF1{
    margin: 0px;
    text-align: center;
}

答案 3 :(得分：0)

//添加margin-top：0px 

body {
  background-color: #101010;
}

header{
	height:50px;
    background:#F0F0F0;
    border:1px solid #CCC;
    width:960px;
    margin:0px auto;	
}

#header{
	height:150px;
    background:#F0F0F0;
    border:1px solid #CCC;
    width:960px;
    margin:0px auto;
	text-shadow: 6px 5px 4px #FF0000;
	font-size:130px;
	position: relative;
}
#header p{
  margin-top: 0px;
}

h2.main {
	font-size: 20px; 
	letter-spacing:1px; 
	text-align: center;
	text-shadow: 0px 0px 2px #2050FF,
				-2px -2px 2px #2050FF,
				 2px -2px 2px #2050FF,
				-2px 2px 2px #2050FF,
				 2px 2px 2px #2050FF;"
}

#section {
	max-width: 960px;
    color: #FFFFFF;
    padding:4px;	
     margin-top: auto;
     margin-bottom: auto;
     margin-right: auto;
     margin-left: auto;
	 padding-left: 220px;
    text-align: center; 
	letter-spacing: 1px;
}

#section2 {
	max-width: 1000px;
    color: #FFFFFF;
    padding:4px;	
     margin-top: auto;
     margin-bottom: auto;
     margin-right: auto;
     margin-left: auto;
	 padding-left: 220px;
    text-align: center; 
	letter-spacing: 1px;
	
}

.main-header {
  text-align: center;
  padding: 5px;
  padding-left: 300px;
  height: 160px;
  margin: left;
}
IMG.displayed {
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: left;
}
h1 {
  color: #ffffff;
}
div.wrapper {
  margin: 10px left;
  width: 250px;
  float: left;
}
nav.vertical {
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
  overflow: hidden;
  text-align: center;
}

nav.vertical > ul {
  padding: 0;
}

nav.vertical > ul > li {
  display: block;
}
nav.vertical > ul > li > label,
nav.vertical > ul > li > a {
  background: rgb(181,189,200); /* Old browsers */
  background: -moz-linear-gradient(top, rgb(181,189,200) 0%, rgb(130,140,149) 36%, rgb(40,52,59) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgb(181,189,200) 0%,rgb(130,140,149) 36%,rgb(40,52,59) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgb(181,189,200) 0%,rgb(130,140,149) 36%,rgb(40,52,59) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
  color: rgb(255, 255, 255);
  display: block;
  font-size: .85rem;
  font-weight: 500;
  height: 50px;
  line-height: 50px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  text-transform: uppercase;
  transition: all .1s ease;
  text-decoration: none;
}
nav.vertical > ul > li > label:hover,
nav.vertical > ul > li > a:hover {
  background-color: rgb(114, 51, 98);
  background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  cursor: pointer;
}
nav.vertical > ul > li > label + input {
  display: none;
  visability: hidden;
}
/* unvisited link */

a:link {
  color: #AAAAFF;
}
/* visited link */

a:visited {
  color: #DD04FF;
}
/* mouse over link */

a:hover {
  color: #FF0000;
}
/* selected link */

a:active {
  color: #FFCC00;
}
footer {
  color: #ffffff;
}
nav {
  background-color: dimgrey;
  border: 5px solid #333;
}
nav ul {
  nav ul: list-style-type: none;
}
nav li {
  padding: 2px;
  display: inline-block;
  border-right: 1px solid #fff;
}
nav li a:link {
  text-decoration: none: font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  font-family: sans-serif;
  font-size: 0.9em;
}
nav li:hover {
  background-color: teal;
}
<!DOCTYPE html>
<html>

<head>
  <title>About</title>
  <link rel="stylesheet" type="text/css" href="css/home.css">
  <meta charset="UTF-8">
</head>

<body>
  <main>
   <div id="header">
      <p class="LogoFF1">FF1 Site</p> 
    </div>
    <div class="wrapper">
      <nav class="vertical">
        <ul>
          <li>
            <a href="homePage.html">Home</a>
          </li>
          <li>
            <a href="profile.html">Profile</a> 
          </li>
          <li>
            <a href="personalBests.html">Personal Bests</a>
          </li>
          <li>
            <a href="links.html">Links</a>
          </li>
		  <li>
            <a href="about.html">About</a>
          </li>
        </ul>
      </nav>
    </div>
   <div id="section">
      <article>
        <h2>About</h2>
     <p>
	Hello there, and welcome to FireFalcons personal website!
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra rutrum massa vitae cursus.
	Integer condimentum sollicitudin tristique. Ut lectus mi, iaculis eget faucibus quis, tincidunt eu ligula.
	Aliquam id ornare dui. Nulla efficitur ipsum vitae magna ultricies placerat ullamcorper ut turpis.
	Ut sed malesuada nibh. Phasellus fringilla ex a eros volutpat consectetur.
	</p>
      </article>
    </div>
    <hr>
    <footer>
      <strong>
                Copyright &copy; 2016 Stephen Fawcett, All rights reserved
        </strong>
    </footer>
  </main>
</body>

</html>

答案 4 :(得分：0)

我已经编辑并更新了你的JS小提琴

只需添加：

.LogoFF1{
  margin-top:0px;
}


body {
  background-color: #101010;
}

header{
	height:50px;
    background:#F0F0F0;
    border:1px solid #CCC;
    width:960px;
    margin:0px auto;	
}

#header{
	height:150px;
    background:#F0F0F0;
    border:1px solid #CCC;
    width:960px;
    margin:0px auto;
	text-shadow: 6px 5px 4px #FF0000;
	font-size:130px;
	position: relative;
}

h2.main {
	font-size: 20px; 
	letter-spacing:1px; 
	text-align: center;
	text-shadow: 0px 0px 2px #2050FF,
				-2px -2px 2px #2050FF,
				 2px -2px 2px #2050FF,
				-2px 2px 2px #2050FF,
				 2px 2px 2px #2050FF;"
}

#section {
	max-width: 960px;
    color: #FFFFFF;
    padding:4px;	
     margin-top: auto;
     margin-bottom: auto;
     margin-right: auto;
     margin-left: auto;
	 padding-left: 220px;
    text-align: center; 
	letter-spacing: 1px;
}

#section2 {
	max-width: 1000px;
    color: #FFFFFF;
    padding:4px;	
     margin-top: auto;
     margin-bottom: auto;
     margin-right: auto;
     margin-left: auto;
	 padding-left: 220px;
    text-align: center; 
	letter-spacing: 1px;
	
}

.main-header {
  text-align: center;
  padding: 5px;
  padding-left: 300px;
  height: 160px;
  margin: left;
}
IMG.displayed {
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: left;
}
h1 {
  color: #ffffff;
}
div.wrapper {
  margin: 10px left;
  width: 250px;
  float: left;
}
nav.vertical {
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
  overflow: hidden;
  text-align: center;
}

nav.vertical > ul {
  padding: 0;
}

nav.vertical > ul > li {
  display: block;
}
nav.vertical > ul > li > label,
nav.vertical > ul > li > a {
  background: rgb(181,189,200); /* Old browsers */
  background: -moz-linear-gradient(top, rgb(181,189,200) 0%, rgb(130,140,149) 36%, rgb(40,52,59) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgb(181,189,200) 0%,rgb(130,140,149) 36%,rgb(40,52,59) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgb(181,189,200) 0%,rgb(130,140,149) 36%,rgb(40,52,59) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
  color: rgb(255, 255, 255);
  display: block;
  font-size: .85rem;
  font-weight: 500;
  height: 50px;
  line-height: 50px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  text-transform: uppercase;
  transition: all .1s ease;
  text-decoration: none;
}
nav.vertical > ul > li > label:hover,
nav.vertical > ul > li > a:hover {
  background-color: rgb(114, 51, 98);
  background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  cursor: pointer;
}
nav.vertical > ul > li > label + input {
  display: none;
  visability: hidden;
}
/* unvisited link */

a:link {
  color: #AAAAFF;
}
/* visited link */

a:visited {
  color: #DD04FF;
}
/* mouse over link */

a:hover {
  color: #FF0000;
}
/* selected link */

a:active {
  color: #FFCC00;
}
footer {
  color: #ffffff;
}
nav {
  background-color: dimgrey;
  border: 5px solid #333;
}
nav ul {
  nav ul: list-style-type: none;
}
nav li {
  padding: 2px;
  display: inline-block;
  border-right: 1px solid #fff;
}
nav li a:link {
  text-decoration: none: font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  font-family: sans-serif;
  font-size: 0.9em;
}
nav li:hover {
  background-color: teal;
}

.LogoFF1{
  margin-top:0px;
}
<!DOCTYPE html>
<html>

<head>
  <title>About</title>
  <link rel="stylesheet" type="text/css" href="css/home.css">
  <meta charset="UTF-8">
</head>

<body>
  <main>
   <div id="header">
      <p class="LogoFF1">FF1 Site</p> 
    </div>
    <div class="wrapper">
      <nav class="vertical">
        <ul>
          <li>
            <a href="homePage.html">Home</a>
          </li>
          <li>
            <a href="profile.html">Profile</a> 
          </li>
          <li>
            <a href="personalBests.html">Personal Bests</a>
          </li>
          <li>
            <a href="links.html">Links</a>
          </li>
		  <li>
            <a href="about.html">About</a>
          </li>
        </ul>
      </nav>
    </div>
   <div id="section">
      <article>
        <h2>About</h2>
     <p>
	Hello there, and welcome to FireFalcons personal website!
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra rutrum massa vitae cursus.
	Integer condimentum sollicitudin tristique. Ut lectus mi, iaculis eget faucibus quis, tincidunt eu ligula.
	Aliquam id ornare dui. Nulla efficitur ipsum vitae magna ultricies placerat ullamcorper ut turpis.
	Ut sed malesuada nibh. Phasellus fringilla ex a eros volutpat consectetur.
	</p>
      </article>
    </div>
    <hr>
    <footer>
      <strong>
                Copyright &copy; 2016 Stephen Fawcett, All rights reserved
        </strong>
    </footer>
  </main>
</body>

</html>

答案 5 :(得分：0)

您可以将其添加到CSS代码

#header{
height:150px;
    background:#F0F0F0;
    border:1px solid #CCC;
    width:960px;
    margin:0px auto;
text-shadow: 6px 5px 4px #FF0000;
font-size:130px;
position: relative;
    text-align:center;
}

或者您可以将其添加到您的HTML 

<div id="header" align="center ">

答案 6 :(得分：0)

添加以下Css 

.LogoFF1{
  text-align:center;
  margin-top:0px;
}

＆＃13;
＆＃13; 
body {
  background-color: #101010;
  
}
.LogoFF1{
  text-align:center;
  margin-top:0px;
}
header{
	height:50px;
    background:#F0F0F0;
    border:1px solid #CCC;
    width:960px;
    margin:0px auto;	
}

#header{
	height:150px;
    background:#F0F0F0;
    border:1px solid #CCC;
    width:960px;
    margin:0px auto;
	text-shadow: 6px 5px 4px #FF0000;
	font-size:130px;
	position: relative;
}

h2.main {
	font-size: 20px; 
	letter-spacing:1px; 
	text-align: center;
	text-shadow: 0px 0px 2px #2050FF,
				-2px -2px 2px #2050FF,
				 2px -2px 2px #2050FF,
				-2px 2px 2px #2050FF,
				 2px 2px 2px #2050FF;"
}

#section {
	max-width: 960px;
    color: #FFFFFF;
    padding:4px;	
     margin-top: auto;
     margin-bottom: auto;
     margin-right: auto;
     margin-left: auto;
	 padding-left: 220px;
    text-align: center; 
	letter-spacing: 1px;
}

#section2 {
	max-width: 1000px;
    color: #FFFFFF;
    padding:4px;	
     margin-top: auto;
     margin-bottom: auto;
     margin-right: auto;
     margin-left: auto;
	 padding-left: 220px;
    text-align: center; 
	letter-spacing: 1px;
	
}

.main-header {
  text-align: center;
  padding: 5px;
  padding-left: 300px;
  height: 160px;
  margin: left;
}
IMG.displayed {
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: left;
}
h1 {
  color: #ffffff;
}
div.wrapper {
  margin: 10px left;
  width: 250px;
  float: left;
}
nav.vertical {
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
  overflow: hidden;
  text-align: center;
}

nav.vertical > ul {
  padding: 0;
}

nav.vertical > ul > li {
  display: block;
}
nav.vertical > ul > li > label,
nav.vertical > ul > li > a {
  background: rgb(181,189,200); /* Old browsers */
  background: -moz-linear-gradient(top, rgb(181,189,200) 0%, rgb(130,140,149) 36%, rgb(40,52,59) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgb(181,189,200) 0%,rgb(130,140,149) 36%,rgb(40,52,59) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgb(181,189,200) 0%,rgb(130,140,149) 36%,rgb(40,52,59) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
  color: rgb(255, 255, 255);
  display: block;
  font-size: .85rem;
  font-weight: 500;
  height: 50px;
  line-height: 50px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  text-transform: uppercase;
  transition: all .1s ease;
  text-decoration: none;
}
nav.vertical > ul > li > label:hover,
nav.vertical > ul > li > a:hover {
  background-color: rgb(114, 51, 98);
  background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  cursor: pointer;
}
nav.vertical > ul > li > label + input {
  display: none;
  visability: hidden;
}
/* unvisited link */

a:link {
  color: #AAAAFF;
}
/* visited link */

a:visited {
  color: #DD04FF;
}
/* mouse over link */

a:hover {
  color: #FF0000;
}
/* selected link */

a:active {
  color: #FFCC00;
}
footer {
  color: #ffffff;
}
nav {
  background-color: dimgrey;
  border: 5px solid #333;
}
nav ul {
  nav ul: list-style-type: none;
}
nav li {
  padding: 2px;
  display: inline-block;
  border-right: 1px solid #fff;
}
nav li a:link {
  text-decoration: none: font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  font-family: sans-serif;
  font-size: 0.9em;
}
nav li:hover {
  background-color: teal;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <title>About</title>
  <link rel="stylesheet" type="text/css" href="css/home.css">
  <meta charset="UTF-8">
</head>

<body>
  <main>
   <div id="header">
      <p class="LogoFF1">FF1 Site</p> 
    </div>
    <div class="wrapper">
      <nav class="vertical">
        <ul>
          <li>
            <a href="homePage.html">Home</a>
          </li>
          <li>
            <a href="profile.html">Profile</a> 
          </li>
          <li>
            <a href="personalBests.html">Personal Bests</a>
          </li>
          <li>
            <a href="links.html">Links</a>
          </li>
		  <li>
            <a href="about.html">About</a>
          </li>
        </ul>
      </nav>
    </div>
   <div id="section">
      <article>
        <h2>About</h2>
     <p>
	Hello there, and welcome to FireFalcons personal website!
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra rutrum massa vitae cursus.
	Integer condimentum sollicitudin tristique. Ut lectus mi, iaculis eget faucibus quis, tincidunt eu ligula.
	Aliquam id ornare dui. Nulla efficitur ipsum vitae magna ultricies placerat ullamcorper ut turpis.
	Ut sed malesuada nibh. Phasellus fringilla ex a eros volutpat consectetur.
	</p>
      </article>
    </div>
    <hr>
    <footer>
      <strong>
                Copyright &copy; 2016 Stephen Fawcett, All rights reserved
        </strong>
    </footer>
  </main>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题