HTML / CSS无法居中底层
我正在为一家朋友公司写一个网站，我的代码存在一些格式问题。我将发布我的问题所在的html文件和.css：
<!doctype html>
<!-- index.html -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raspados Flamingo</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/mobile.css">
<script src="js/mobile.js" type="text/javascript"></script>
</head>
<body>
<div id="page">
<div id="header">
<div>
<a href="index.html" class="logo"><img src="images/head.jpg"
alt=""></a>
<ul id="navigation">
<li class="selected">
<a href="index.html">Home</a>
</li>
<li class="menu">
<a href="about.html">About</a>
<ul class="primary">
<li>
</ul>
</li>
<li class="menu">
<a href="menu.html">Menu</a>
<ul class="secondary">
</ul>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
<div id="body" class="home">
<div class="header">
<img src="images/truck.jpg" alt="">
<div>
<a href="menu.html"><c>Our Menu</c></a>
</div>
</div>
<div class="body">
<div>
<div>
<h1>HEADER 1</h1>
<h2>Test</h2>
<p>/*Description*/</p>
</div>
<img src="images/yogurt.jpg" alt="">
</div>
</div>
<div class="footer">
<div>
<ul>
<li>
<a href="about.html" class="about"></a>
<h1>OUR STORY</h1>
</li>
<li>
<a href="menu.html" class="flavor"></a>
<h1>FLAVORS</h1>
</li>
<li>
<a href="contact.html" class="contact"></a>
<h1>OUR LOCATION</h1>
</li>
</ul>
</div>
</div>
</div>
<div id="footer">
<div>
<div class="connect">
<a href="https://www.facebook.com/raspadosflamingo/ "
class="facebook">facebook </a>
<a href="http://freewebsitetemplates.com/go/twitter/"
class="twitter">twitter</a>
<a href="http://freewebsitetemplates.com/go/googleplus/"
class="googleplus">googleplus</a>
<a href="http://pinterest.com/fwtemplates/"
class="pinterest">pinterest</a>
</div>
<p>© 2018 Raspados Flamingo. All Rights Reserved.<br>
Developed by Melissa Chillington</p>
</div>
</div>
</div>
</body>
</html>
/* style.css */
body {
margin: 0;
padding: 0;
position: relative;
width: auto;
}
body #page {
margin: 0;
overflow: hidden;
padding: 0;
width: auto;
}
a {
text-decoration: none;
outline: none;
}
a:active {
background: none;
}
img {
border: none;
}
/*-------------------------------------------FONTS---------------------------------------------*/
@font-face {
font-family: 'roboto-regular-webfont';
src: url('../fonts/roboto-regular-webfont.eot');
src: url('../fonts/roboto-regular-webfont.woff') format('woff'),
url('../fonts/roboto-regular-webfont.ttf') format('truetype'),
url('../fonts/roboto-regular-webfont.svg') format('svg');
}
@font-face {
font-family: 'quicksand-bold-webfont';
src: url('../fonts/quicksand-bold-webfont.eot');
src: url('../fonts/quicksand-bold-webfont.woff') format('woff'),
url('../fonts/quicksand-bold-webfont.ttf') format('truetype'),
url('../fonts/quicksand-bold-webfont.svg') format('svg');
}
@font-face {
font-family: 'magra-bold-webfont';
src: url('../fonts/magra-bold-webfont.eot');
src: url('../fonts/magra-bold-webfont.woff') format('woff'),
url('../fonts/magra-bold-webfont.ttf') format('truetype'),
url('../fonts/magra-bold-webfont.svg') format('svg');
}
@font-face {
font-family: 'lato-regular-webfont';
src: url('../fonts/lato-regular-webfont.eot');
src: url('../fonts/lato-regular-webfont.woff') format('woff'),
url('../fonts/lato-regular-webfont.ttf') format('truetype'),
url('../fonts/lato-regular-webfont.svg') format('svg');
}
@font-face {
font-family: 'lato-bold-webfont';
src: url('../fonts/lato-bold-webfont.eot');
src: url('../fonts/lato-bold-webfont.woff') format('woff'),
url('../fonts/lato-bold-webfont.ttf') format('truetype'),
url('../fonts/lato-bold-webfont.svg') format('svg');
}
/*----------------------------------------header-styles--------------------
-------------------*/
#header {
background-color: #eeebec;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
#header div {
margin: 0 auto;
max-width: 940px;
overflow: hidden;
padding: 41px 10px 27px;
}
#header div a.logo {
float: left;
margin: 0 0 0 29px;
padding: 0;
width: auto;
}
#header div a.logo img {
display: block;
margin: 0;
padding: 0;
width: auto;
}
#header div ul {
display: inline-block;
float: right;
list-style: none outside none;
margin: 0 auto;
padding: 17px 0 0;
text-align: center;
width: 513px;
}
#header div ul li {
display: inline-block;
*float: left; /* Needed for IE7 and old versions */
margin: 0 35px;
padding: 0;
position: relative;
width: auto;
}
#header div ul li a {
color: #7a6666;
font-family: lato-regular-webfont;
font-size: 15px;
font-weight: normal;
line-height: 15px;
margin: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
}
#header div ul li.selected a, #header div ul li.selected a:hover {
color: #cb3362;
}
#header div ul li a:hover, #header div ul li.menu:hover ul li a {
color: #c8c10d;
}
#header div ul li ul li a {
color: #cb3362;
font-family: lato-regular-webfont;
font-size: 15px;
font-weight: normal;
line-height: 15px;
margin: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
}
#header div ul li.menu {
min-height: 35px;
z-index: 80;
}
#header div ul li.menu ul {
display: block;
float: none;
left: -99999px;
margin: 0;
padding: 0;
position: absolute;
top: 24px;
width: 106px;
z-index: 90;
}
#header div ul li.menu:hover ul.primary, #header div ul li.menu
ul#selected.primary {
left: -30px;
}
#header div ul li.menu:hover ul.secondary, #header div ul li.menu
ul#selected.secondary {
left: -27px;
}
#header div ul li.menu ul li {
float: none;
margin: 0;
padding: 0;
}
/*----------------------------------------body-home-styles-----------------
----------------------*/
#body.home {
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 100%;
}
#body.home div.header {
background-color: #f8f8f8;
margin: 0;
max-width: none;
overflow: hidden;
padding: 0;
width: 100%;
}
#body.home div.header img {
display: block;
left: 50%;
margin: 0 auto 0 -563px;
padding: 0;
position: absolute;
width: 1126px;
}
#body.home div.header div {
margin: 0 auto;
max-width: 960px;
min-height: 660px;
padding: 0;
position: relative;
}
#body.home div.header div a {
background: url(../images/icons.png) no-repeat 0 -128px;
color: #FFFFFF;
display: block;
font-family: quicksand-bold-webfont;
font-size: 24px;
font-weight: normal;
height: 99px;
line-height: 24px;
margin: 0;
padding: 52px 0 0;
position: absolute;
right: 130px;
text-align: center;
text-transform: uppercase;
top: 437px;
width: 156px;
z-index: 90;
}
#body.home div.body {
background-color: #eae7e8;
margin: 0;
max-width: none;
padding: 0;
width: 100%;
}
#body.home div.body div {
margin: 0 auto;
max-width: 960px;
overflow: hidden;
padding: 0;
}
#body.home div.body div div {
float: left;
margin: 0;
padding: 0 0 0 40px;
width: 560px;
}
#body.home div.body div img {
display: block;
float: right;
left: 0;
margin: 0;
padding: 0;
position: relative;
width: auto;
}
#body.home div.body div div h1 {
color: #7A6666;
display: block;
font-family: lato-bold-webfont;
font-size: 18px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 47px 0 18px;
text-align: left;
text-transform: uppercase;
width: 560px;
}
#body.home div.body div div h2 {
color: #E32A62;
display: block;
font-family: magra-bold-webfont;
font-size: 30px;
font-weight: normal;
line-height: 30px;
margin: 0;
padding: 0 0 26px;
text-align: left;
text-transform: none;
width: 560px;
}
#body.home div.body div div p {
color: #7a6666;
display: block;
font-family: roboto-regular-webfont;
font-size: 14px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0;
text-align: left;
width: 560px;
}
#body.home div.body div div p a {
color: #7a6666;
display: block;
font-family: roboto-regular-webfont;
font-size: 14px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0;
text-decoration: underline;
}
#body.home div.body div div p a:hover {
color: #c8c10d;
}
#body.home div.footer {
background-color: #89cff0;
margin: 0;
max-width: none;
padding: 0;
width: 100%;
}
#body.home div.footer div {
margin: 0 auto;
max-width: 960px;
padding: 0;
}
#body.home div.footer div ul {
display: inline-block;
list-style: none outside none;
margin: 0;
padding: 36px 0 32px;
width: 100%;
}
#body.home div.footer div ul li {
float: center;
margin: 0 10px;
padding: 0;
width: 220px;
}
#body.home div.footer div ul li a {
background: url(../images/icons.png) no-repeat;
display: block;
height: 44px;
margin: 0 auto 22px;
padding: 0;
width: 80px;
}
#body.home div.footer div ul li a.about {
background-position: 0 -418px;
}
#body.home div.footer div ul li a.flavor {
background-position: 0 -280px;
}
#body.home div.footer div ul li a.contact {
float: none;
background-position: 0 -326px;
}
#body.home div.footer div ul li h1 {
color: #ffffff;
font-family: lato-regular-webfont;
font-size: 20px;
font-weight: normal;
line-height: 20px;
margin: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
}
/*----------------------------------------body-styles----------------------
-----------------*/
#body {
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 100%;
}
#body div.header {
background-color: #89cff0;
margin: 0 auto;
max-width: none;
overflow: hidden;
padding: 0;
}
#body div.header div {
margin: 0 auto;
max-width: 960px;
padding: 0;
}
#body div.header div h1 {
color: #FFFFFF;
font-family: lato-regular-webfont;
font-size: 30px;
font-weight: normal;
line-height: 30px;
margin: 0;
padding: 28px 0 23px;
text-align: center;
text-transform: uppercase;
}
#body div.body {
background-color: #ebebed;
margin: 0;
max-width: none;
min-height: 249px;
overflow: hidden;
padding: 0;
width: 100%;
}
#body div.body img {
display: block;
left: 50%;
margin: 0 auto 0 -507px;
padding: 0;
position: absolute;
width: 1014px;
}
#body div.footer {
margin: 0 auto;
max-width: 960px;
overflow: hidden;
padding: 40px 0 110px;
}
#body div.footer div.sidebar {
background-color: #EFEDEE;
float: left;
margin: 0 10px 0 40px;
padding: 36px 0 34px;
width: 280px;
}
#body div.footer div.article {
float: left;
margin: 0;
padding: 0 0 0 30px;
width: 560px;
}
#body div.footer div.sidebar h1 {
display: block;
line-height: 48px;
margin: 0 auto;
padding: 0 0 50px;
text-align: center;
width: 193px;
}
#body div.footer div.sidebar p {
display: block;
line-height: 48px;
margin: 0 auto;
text-align: center;
width: 169px;
}
#body div.footer div h1 {
color: #CB3362;
font-family: lato-regular-webfont;
font-size: 24px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0 0 27px;
text-align: left;
text-transform: uppercase;
}
#body div.footer div p, #body div.footer div span {
color: #7A6666;
font-family: roboto-regular-webfont;
font-size: 14px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0 0 24px;
text-align: left;
}
#body div.footer div span {
display: block;
margin: 0;
padding: 0;
}
#body div.footer div p a {
color: #7a6666;
font-family: roboto-regular-webfont;
font-size: 14px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0;
text-decoration: underline;
}
#body div.footer div p a:hover, #body div ul li p a:hover, #body div.blog
.featured ul li div p a:hover, #body div.blog .sidebar p a:hover, #body
div.blog .featured p a:hover, #body.contact div.body div div p a:hover {
color: #c8c10d;
}
#body div {
margin: 0 auto;
max-width: 960px;
padding: 7px 0 57px;
}
#body div ul {
display: inline-block;
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0 0 22px;
width: 100%;
}
#body div ul li {
float: left;
margin: 0 10px;
padding: 0;
width: 220px;
}
#body div ul li h1 {
color: #E32A62;
font-family: magra-bold-webfont;
font-size: 28px;
font-weight: normal;
line-height: 28px;
margin: 0;
padding: 87px 0 27px 30px;
text-align: left;
text-transform: capitalize;
}
#body div ul li p {
color: #7A6666;
font-family: roboto-regular-webfont;
font-size: 14px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0 0 0 30px;
text-align: left;
width: 190px;
}
#body div ul li p a {
color: #7a6666;
font-family: roboto-regular-webfont;
font-size: 14px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0;
text-decoration: underline;
}
#body div ul li img {
display: block;
margin: 0 auto 15px;
padding: 0;
width: auto;
}
#body div ul li h2 {
color: #e32a62;
font-family: lato-regular-webfont;
font-size: 20px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
}
#body div.blog {
margin: 0 auto;
max-width: 960px;
overflow: hidden;
padding: 98px 0 146px;
}
#body div.singlepost {
margin: 0 auto;
max-width: 960px;
overflow: hidden;
padding: 98px 0 99px;
}
#body div.blog .featured {
float: left;
margin: 0 10px;
padding: 0;
width: 620px;
}
#body div.singlepost .featured {
float: left;
margin: 0 10px;
padding: 0;
width: 620px;
}
#body div.blog .featured ul {
display: inline-block;
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%;
}
#body div.blog .featured ul li:first-child {
margin: 0 0 50px 0;
}
#body div.blog .featured ul li {
background: url(../images/bg-border.gif) no-repeat bottom center;
float: none;
margin: 0 0 39px;
overflow: hidden;
padding: 0;
width: auto;
}
#body div.blog .featured ul li img {
float: left;
margin: 2px 0 0;
padding: 0 30px;
width: auto;
}
#body div.blog .featured ul li div {
float: left;
margin: 0;
padding: 0 0 36px 10px;
width: 370px;
}
#body div.blog .featured ul li div h1 {
color: #CB3362;
font-family: lato-regular-webfont;
font-size: 24px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0 0 3px;
text-align: left;
text-transform: uppercase;
}
#body div.blog .featured ul li div span {
color: #7A6666;
display: block;
font-family: roboto-regular-webfont;
font-size: 12px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0 0 24px;
text-align: left;
text-transform: none;
}
#body div.blog .featured ul li div p {
color: #7a6666;
font-family: roboto-regular-webfont;
font-size: 14px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0 0 39px 0;
text-align: left;
width: 100%;
}
#body div.blog .featured ul li div p a {
color: #7a6666;
font-family: roboto-regular-webfont;
font-size: 14px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0;
text-decoration: underline;
}
#body div.blog .featured ul li div a.more {
border: 2px solid #cbb5bc;
color: #a5838e;
display: block;
font-family: lato-bold-webfont;
font-size: 16px;
font-weight: normal;
height: 36px;
line-height: 36px;
margin: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
width: 156px;
}
#body div.blog .featured ul li div a.more:hover {
background-color: #c8c10d;
border: none;
color: #ffffff;
height: 40px;
line-height: 40px;
width: 160px;
}
#body div.blog .featured a.load {
border: 2px solid #cbb5bc;
color: #a5838e;
display: block;
font-family: lato-bold-webfont;
font-size: 16px;
font-weight: normal;
height: 36px;
line-height: 36px;
margin: 0 auto;
padding: 0;
text-align: center;
text-transform: uppercase;
width: 156px;
}
#body div.blog .featured a.load:hover {
background-color: #cb3362;
border: none;
color: #ffffff;
height: 40px;
line-height: 40px;
width: 160px;
}
#body div.blog .sidebar {
background-color: #EFEDEE;
float: left;
margin: 0;
padding: 0 0 71px;
width: 280px;
}
#body div.singlepost .sidebar {
background-color: #EFEDEE;
float: left;
margin: 0;
padding: 0 0 71px;
width: 280px;
}
#body div.blog .sidebar h1, #body div.singlepost .sidebar h1 {
color: #CB3362;
font-family: magra-bold-webfont;
font-size: 30px;
font-weight: normal;
line-height: 30px;
margin: 0;
padding: 42px 0 29px;
text-align: center;
text-transform: capitalize;
}
#body div.blog .sidebar img, #body div.singlepost .sidebar img {
display: block;
margin: 0 auto;
padding: 0;
width: auto;
}
#body div.blog .sidebar h2, #body div.singlepost .sidebar h2 {
color: #CB3362;
font-family: lato-regular-webfont;
font-size: 24px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 34px 0 3px;
text-align: center;
text-transform: uppercase;
}
#body div.blog .sidebar span, #body div.singlepost .sidebar span {
color: #7A6666;
display: block;
font-family: roboto-regular-webfont;
font-size: 12px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0 0 24px;
text-align: center;
text-transform: none;
}
#body div.blog .sidebar p, #body div.singlepost .sidebar p {
color: #7A6666;
display: block;
font-family: roboto-regular-webfont;
font-size: 14px;
font-weight: normal;
line-height: 24px;
margin: 0 auto;
padding: 0 0 64px;
text-align: center;
text-transform: none;
width: 200px;
}
#body div.blog .sidebar p a, #body div.singlepost .sidebar p a {
color: #7a6666;
font-family: roboto-regular-webfont;
font-size: 14px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0;
text-decoration: underline;
}
#body div.blog .sidebar a.more, #body div.singlepost .sidebar a.more {
border: 2px solid #d3c2c7;
color: #a5838e;
display: block;
font-family: lato-bold-webfont;
font-size: 16px;
font-weight: normal;
height: 36px;
line-height: 36px;
margin: 0 auto;
padding: 0;
text-align: center;
text-transform: uppercase;
width: 156px;
}
#body div.blog .sidebar a.more:hover, #body div.singlepost .sidebar
a.more:hover {
background-color: #c8c10d;
border: none;
color: #ffffff;
height: 40px;
line-height: 40px;
width: 160px;
}
#body div.singlepost .featured img {
display: block;
margin: 0;
padding: 1px 0 0 30px;
width: auto;
}
#body div.singlepost .featured h1 {
color: #CB3362;
font-family: lato-regular-webfont;
font-size: 24px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 40px 0 4px 30px;
text-align: left;
text-transform: uppercase;
}
#body div.singlepost .featured span {
color: #7A6666;
display: block;
font-family: Arial;
font-size: 12px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0 0 23px 30px;
text-align: left;
text-transform: none;
}
#body div.singlepost .featured p {
color: #7A6666;
font-family: Arial;
font-size: 14px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0 0 24px 30px;
text-align: left;
}
#body div.singlepost .featured p a {
color: #7a6666;
font-family: Arial;
font-size: 14px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0;
text-decoration: underline;
}
#body div.singlepost .featured a.load {
border: 2px solid #CBB5BC;
color: #A5838E;
display: block;
font-family: lato-bold-webfont;
font-size: 16px;
font-weight: normal;
height: 36px;
line-height: 36px;
margin: 63px auto 0;
padding: 0;
text-align: center;
text-transform: uppercase;
width: 156px;
}
#body div.singlepost .featured a.load:hover {
background-color: #c8c10d;
border: none;
color: #ffffff;
height: 40px;
line-height: 40px;
width: 160px;
}
#body.contact div.body {
background: url(../images/map.jpg) no-repeat center top #b5aaad;
margin: 0;
max-width: none;
padding: 0;
width: 100%;
}
#body.contact div.body div {
margin: 0 auto;
max-width: 960px;
overflow: hidden;
padding: 39px 0 0;
}
#body.contact div.body div div {
background: url(../images/bg-transparent.png) repeat;
margin: 0 auto;
overflow: hidden;
padding: 30px 0 35px 133px;
width: 747px;
}
#body.contact div.body div div img {
float: left;
left: auto;
margin: 0 38px 0 0;
padding: 0;
position: relative;
width: auto;
}
#body.contact div.body div div h1 {
color: #CB3362;
float: left;
font-family: lato-regular-webfont;
font-size: 24px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 15px 0 4px;
text-align: left;
text-transform: uppercase;
width: 510px;
}
#body.contact div.body div div p {
color: #7a6666;
float: left;
font-family: roboto-regular-webfont;
font-size: 14px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0;
text-align: left;
width: 510px;
}
#body.contact div.body div div p a {
color: #7a6666;
font-family: roboto-regular-webfont;
font-size: 14px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0;
text-decoration: underline;
}
#body div.footer .contact {
float: left;
margin: 0 10px 0 0;
max-width: none;
padding: 0 0 61px 40px;
width: 590px;
}
#body div.footer .contact h1 {
color: #CB3362;
float: none;
font-family: lato-regular-webfont;
font-size: 24px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0 0 43px;
text-align: left;
text-transform: uppercase;
width: auto;
}
#body div.footer .contact form {
margin: 0;
overflow: hidden;
padding: 0;
width: 560px;
}
#body div.footer .contact form input {
background: none;
border: 1px solid #B6ADB0;
color: #7A6666;
display: block;
font-family: lato-regular-webfont;
font-size: 14px;
font-weight: normal;
height: 38px;
line-height: 38px;
margin: 0 0 8px;
padding: 0 0 0 10px;
text-align: left;
width: 548px;
}
#body div.footer .contact form textarea {
background: none;
border: 1px solid #B6ADB0;
color: #7A6666;
display: block;
font-family: lato-regular-webfont;
font-size: 14px;
font-weight: normal;
height: 270px;
line-height: 24px;
margin: 0 0 9px;
overflow: auto;
padding: 7px 0 0 10px;
resize: none;
text-align: left;
width: 548px;
}
#body div.footer .contact form input#submit {
background: none;
border: 2px solid #c5abb4;
color: #a5838e;
cursor: pointer;
display: block;
font-family: lato-bold-webfont;
font-size: 16px;
font-weight: normal;
height: 40px;
line-height: 36px;
margin: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
width: 141px;
}
#body div.footer .contact form input#submit:hover {
background-color: #c8c10d;
border: none;
height: 40px;
width: 141px;
}
#body div.footer .section {
background-color: #EFEDEE;
float: left;
margin: 0;
max-width: none;
padding: 0 0 35px;
width: 280px;
}
#body div.footer .section h1 {
color: #CB3362;
display: block;
font-family: lato-regular-webfont;
font-size: 24px;
font-weight: normal;
line-height: 24px;
margin: 0 auto;
padding: 24px 0 27px;
text-align: center;
text-transform: uppercase;
width: 202px;
}
#body div.footer .section p {
color: #7A6666;
display: block;
font-family: roboto-regular-webfont;
font-size: 14px;
font-weight: normal;
line-height: 24px;
margin: 0 auto;
padding: 0;
text-align: center;
width: 202px;
}
#body div.footer .section p a {
}
#body div.footer .section p a:hover {
}
/*----------------------------------------footer-styles--------------------
-------------------*/
#footer {
background-color: #cb3362;
margin: 0;
padding: 0;
width: 100%;
}
#footer div {
margin: 0 auto;
max-width: 960px;
overflow: hidden;
padding: 59px 0 13px;
}
#footer div p {
color: #FFFFFF;
display: block;
font-family: roboto-regular-webfont;
font-size: 12px;
font-weight: normal;
line-height: 15px;
margin: 0;
padding: 33px 0 50px;
text-align: center;
text-transform: none
}
#footer div .connect {
display: block;
height: 30px;
margin: 0 auto;
max-width: none;
overflow: hidden;
padding: 0;
width: 240px;
}
#footer div .connect a {
background: url(../images/icons.png) no-repeat;
display: block;
float: left;
height: 30px;
margin: 0 15px;
padding: 0;
text-indent: -99999px;
width: 30px;
}
#footer div .connect a.facebook {
background-position: 0 0;
}
#footer div .connect a.googleplus {
background-position: 0 -32px;
}
#footer div .connect a.pinterest {
background-position: 0 -64px;
}
#footer div .connect a.twitter {
background-position: 0 -96px;
}
我希望这个底页基本上居中。在哪里说“我们的故事风味和位置”
1 个答案:
答案 0 :(得分：1)
添加这些样式
#body.home div.footer div ul {
display: flex;
list-style: none outside none;
margin: 0;
padding: 36px 0 32px;
width: 100%;
justify-content: center;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？