0
我无法将我的徽标插入页面顶部的白色横幅内。如何插入并将我的徽标居中对齐到我的横幅中？
你看出来我的代码的东西是header ID：
<div id="header">
<p class="LogoFF1">FF1 Site</p>
</div>
<div class="wrapper"></div>
请参考我JSFiddle链接：
谢谢:)
A
回答
3
只需添加这个CSS对于商标分类：
.LogoFF1 {
text-align: center;
margin: 0;
}
body {
background-color: #101010;
}
header{
\t height:50px;
background:#F0F0F0;
border:1px solid #CCC;
width:960px;
margin:0px auto; \t
}
#header{
\t height:150px;
background:#F0F0F0;
border:1px solid #CCC;
width:960px;
margin:0px auto;
\t text-shadow: 6px 5px 4px #FF0000;
\t font-size:130px;
\t position: relative;
}
h2.main {
\t font-size: 20px;
\t letter-spacing:1px;
\t text-align: center;
\t text-shadow: 0px 0px 2px #2050FF,
\t \t \t \t -2px -2px 2px #2050FF,
\t \t \t \t 2px -2px 2px #2050FF,
\t \t \t \t -2px 2px 2px #2050FF,
\t \t \t \t 2px 2px 2px #2050FF;"
}
#section {
\t max-width: 960px;
color: #FFFFFF;
padding:4px; \t
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
\t padding-left: 220px;
text-align: center;
\t letter-spacing: 1px;
}
#section2 {
\t max-width: 1000px;
color: #FFFFFF;
padding:4px; \t
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
\t padding-left: 220px;
text-align: center;
\t letter-spacing: 1px;
\t
}
.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;
}<!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>
\t \t <li>
<a href="about.html">About</a>
</li>
</ul>
</nav>
</div>
<div id="section">
<article>
<h2>About</h2>
<p>
\t Hello there, and welcome to FireFalcons personal website!
\t </p>
\t <p>
\t Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra rutrum massa vitae cursus.
\t Integer condimentum sollicitudin tristique. Ut lectus mi, iaculis eget faucibus quis, tincidunt eu ligula.
\t Aliquam id ornare dui. Nulla efficitur ipsum vitae magna ultricies placerat ullamcorper ut turpis.
\t Ut sed malesuada nibh. Phasellus fringilla ex a eros volutpat consectetur.
\t </p>
</article>
</div>
<hr>
<footer>
<strong>
Copyright © 2016 Stephen Fawcett, All rights reserved
</strong>
</footer>
</main>
</body>
</html>
0
//添加的margin-top：0像素
body {
background-color: #101010;
}
header{
\t height:50px;
background:#F0F0F0;
border:1px solid #CCC;
width:960px;
margin:0px auto; \t
}
#header{
\t height:150px;
background:#F0F0F0;
border:1px solid #CCC;
width:960px;
margin:0px auto;
\t text-shadow: 6px 5px 4px #FF0000;
\t font-size:130px;
\t position: relative;
}
#header p{
margin-top: 0px;
}
h2.main {
\t font-size: 20px;
\t letter-spacing:1px;
\t text-align: center;
\t text-shadow: 0px 0px 2px #2050FF,
\t \t \t \t -2px -2px 2px #2050FF,
\t \t \t \t 2px -2px 2px #2050FF,
\t \t \t \t -2px 2px 2px #2050FF,
\t \t \t \t 2px 2px 2px #2050FF;"
}
#section {
\t max-width: 960px;
color: #FFFFFF;
padding:4px; \t
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
\t padding-left: 220px;
text-align: center;
\t letter-spacing: 1px;
}
#section2 {
\t max-width: 1000px;
color: #FFFFFF;
padding:4px; \t
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
\t padding-left: 220px;
text-align: center;
\t letter-spacing: 1px;
\t
}
.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>
\t \t <li>
<a href="about.html">About</a>
</li>
</ul>
</nav>
</div>
<div id="section">
<article>
<h2>About</h2>
<p>
\t Hello there, and welcome to FireFalcons personal website!
\t </p>
\t <p>
\t Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra rutrum massa vitae cursus.
\t Integer condimentum sollicitudin tristique. Ut lectus mi, iaculis eget faucibus quis, tincidunt eu ligula.
\t Aliquam id ornare dui. Nulla efficitur ipsum vitae magna ultricies placerat ullamcorper ut turpis.
\t Ut sed malesuada nibh. Phasellus fringilla ex a eros volutpat consectetur.
\t </p>
</article>
</div>
<hr>
<footer>
<strong>
Copyright © 2016 Stephen Fawcett, All rights reserved
</strong>
</footer>
</main>
</body>
</html>
1
就在这个CSS添加到您的标志
.LogoFF1 {
margin-top: 0px;
text-align: center;
}
body {
background-color: #101010;
}
header{
\t height:50px;
background:#F0F0F0;
border:1px solid #CCC;
width:960px;
margin:0px auto; \t
}
#header{
\t height:150px;
background:#F0F0F0;
border:1px solid #CCC;
width:960px;
margin:0px auto;
\t text-shadow: 6px 5px 4px #FF0000;
\t font-size:130px;
\t position: relative;
}
h2.main {
\t font-size: 20px;
\t letter-spacing:1px;
\t text-align: center;
\t text-shadow: 0px 0px 2px #2050FF,
\t \t \t \t -2px -2px 2px #2050FF,
\t \t \t \t 2px -2px 2px #2050FF,
\t \t \t \t -2px 2px 2px #2050FF,
\t \t \t \t 2px 2px 2px #2050FF;"
}
#section {
\t max-width: 960px;
color: #FFFFFF;
padding:4px; \t
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
\t padding-left: 220px;
text-align: center;
\t letter-spacing: 1px;
}
#section2 {
\t max-width: 1000px;
color: #FFFFFF;
padding:4px; \t
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
\t padding-left: 220px;
text-align: center;
\t letter-spacing: 1px;
\t
}
.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>
\t \t <li>
<a href="about.html">About</a>
</li>
</ul>
</nav>
</div>
<div id="section">
<article>
<h2>About</h2>
<p>
\t Hello there, and welcome to FireFalcons personal website!
\t </p>
\t <p>
\t Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra rutrum massa vitae cursus.
\t Integer condimentum sollicitudin tristique. Ut lectus mi, iaculis eget faucibus quis, tincidunt eu ligula.
\t Aliquam id ornare dui. Nulla efficitur ipsum vitae magna ultricies placerat ullamcorper ut turpis.
\t Ut sed malesuada nibh. Phasellus fringilla ex a eros volutpat consectetur.
\t </p>
</article>
</div>
<hr>
<footer>
<strong>
Copyright © 2016 Stephen Fawcett, All rights reserved
</strong>
</footer>
</main>
</body>
</html>
0
我已经编辑和更新您的JS提琴
只需补充一点：
.LogoFF1{
margin-top:0px;
}
body {
background-color: #101010;
}
header{
\t height:50px;
background:#F0F0F0;
border:1px solid #CCC;
width:960px;
margin:0px auto; \t
}
#header{
\t height:150px;
background:#F0F0F0;
border:1px solid #CCC;
width:960px;
margin:0px auto;
\t text-shadow: 6px 5px 4px #FF0000;
\t font-size:130px;
\t position: relative;
}
h2.main {
\t font-size: 20px;
\t letter-spacing:1px;
\t text-align: center;
\t text-shadow: 0px 0px 2px #2050FF,
\t \t \t \t -2px -2px 2px #2050FF,
\t \t \t \t 2px -2px 2px #2050FF,
\t \t \t \t -2px 2px 2px #2050FF,
\t \t \t \t 2px 2px 2px #2050FF;"
}
#section {
\t max-width: 960px;
color: #FFFFFF;
padding:4px; \t
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
\t padding-left: 220px;
text-align: center;
\t letter-spacing: 1px;
}
#section2 {
\t max-width: 1000px;
color: #FFFFFF;
padding:4px; \t
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
\t padding-left: 220px;
text-align: center;
\t letter-spacing: 1px;
\t
}
.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>
\t \t <li>
<a href="about.html">About</a>
</li>
</ul>
</nav>
</div>
<div id="section">
<article>
<h2>About</h2>
<p>
\t Hello there, and welcome to FireFalcons personal website!
\t </p>
\t <p>
\t Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra rutrum massa vitae cursus.
\t Integer condimentum sollicitudin tristique. Ut lectus mi, iaculis eget faucibus quis, tincidunt eu ligula.
\t Aliquam id ornare dui. Nulla efficitur ipsum vitae magna ultricies placerat ullamcorper ut turpis.
\t Ut sed malesuada nibh. Phasellus fringilla ex a eros volutpat consectetur.
\t </p>
</article>
</div>
<hr>
<footer>
<strong>
Copyright © 2016 Stephen Fawcett, All rights reserved
</strong>
</footer>
</main>
</body>
</html>
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 ">
1
就在.LogoFF1类中添加这个CSS
.LogoFF1{
margin: 0px;
text-align: center;
}
0
添加以下CSS
.LogoFF1{
text-align:center;
margin-top:0px;
}
body {
background-color: #101010;
}
.LogoFF1{
text-align:center;
margin-top:0px;
}
header{
\t height:50px;
background:#F0F0F0;
border:1px solid #CCC;
width:960px;
margin:0px auto; \t
}
#header{
\t height:150px;
background:#F0F0F0;
border:1px solid #CCC;
width:960px;
margin:0px auto;
\t text-shadow: 6px 5px 4px #FF0000;
\t font-size:130px;
\t position: relative;
}
h2.main {
\t font-size: 20px;
\t letter-spacing:1px;
\t text-align: center;
\t text-shadow: 0px 0px 2px #2050FF,
\t \t \t \t -2px -2px 2px #2050FF,
\t \t \t \t 2px -2px 2px #2050FF,
\t \t \t \t -2px 2px 2px #2050FF,
\t \t \t \t 2px 2px 2px #2050FF;"
}
#section {
\t max-width: 960px;
color: #FFFFFF;
padding:4px; \t
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
\t padding-left: 220px;
text-align: center;
\t letter-spacing: 1px;
}
#section2 {
\t max-width: 1000px;
color: #FFFFFF;
padding:4px; \t
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
\t padding-left: 220px;
text-align: center;
\t letter-spacing: 1px;
\t
}
.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>
\t \t <li>
<a href="about.html">About</a>
</li>
</ul>
</nav>
</div>
<div id="section">
<article>
<h2>About</h2>
<p>
\t Hello there, and welcome to FireFalcons personal website!
\t </p>
\t <p>
\t Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra rutrum massa vitae cursus.
\t Integer condimentum sollicitudin tristique. Ut lectus mi, iaculis eget faucibus quis, tincidunt eu ligula.
\t Aliquam id ornare dui. Nulla efficitur ipsum vitae magna ultricies placerat ullamcorper ut turpis.
\t Ut sed malesuada nibh. Phasellus fringilla ex a eros volutpat consectetur.
\t </p>
</article>
</div>
<hr>
<footer>
<strong>
Copyright © 2016 Stephen Fawcett, All rights reserved
</strong>
</footer>
</main>
</body>
</html>相关问题
- 1. 如何让我的徽标覆盖蓝色横幅？
- 2. Iphone SDK-如何在我的应用程序中插入横幅
- 3. 如何使用Bootstrap将我的徽标垂直居中？
- 4. 如何居中对齐徽标图像和右对齐导航ul
- 5. 如何将表格菜单对齐到一个横幅
- 6. HTML CSS横幅对齐
- 7. 我想中心横幅
- 8. 如何将我的标题居中？
- 9. 无法居中对齐我的列
- 10. 将JButton图标对齐到左侧并保持文本居中
- 11. 使用CSS在Firefox中定位徽标和横幅的问题
- 12. 如何居中对齐onDemandGrid标头
- 13. 插入背景横幅
- 14. 如何将html5视频合并到横幅中
- 15. 如何将我的广告横幅放到我的应用程序底部？
- 16. 如何将我的徽标添加到我的rss提要？
- 17. 如何为横幅徽标设置超链接。请帮忙
- 18. 如何居中对齐div
- 19. 如何在标题中创建横幅
- 20. 如何让我的水平subnav居中对齐？
- 21. 我该如何左对齐居中按钮下的文本？
- 22. 插入比div更宽的横幅
- 23. 如何在Android中的标签栏中居中对齐文本
- 24. 将导航栏对齐到徽标中心（图片）
- 25. 如何对齐div中的左元素与居中对齐
- 26. 将横幅的内部HTML复制到我的div
- 27. 导航栏中的徽标未居中
- 28. 如何将我的类对象插入到我的非STL列表中？
- 29. 如何创建居中对齐的NSString
- 30. 如何将ADMOB横幅添加到Unity？