这是我正在处理的网站的链接:http://students.bcitwebdev.com/jlandon/geordieirving/index.php .
我遇到了一个问题...边距自动居中...但它只是有点偏离。其他人能看到这个吗？这真的很困扰我。
这是我的 html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="geordie.css" />
<script type="text/javascript" src="geordie.js"></script>
<title>Home</title>
<meta charset="UTF-8"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./galleria/galleria-1.2.8.min.js"></script>
<script type="text/javascript" src="./galleria/plugins/flickr/galleria.flickr.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
Galleria.loadTheme('./galleria/themes/classic/galleria.classic.min.js');
$("#galleria").galleria({
autoplay: 5000,
responsive: true,
height: .57,
imageCrop: false,
thumbCrop: 'height',
carousel: true,
showInfo: true,
swipe: true,
easing: 'galleriaOut',
transition: 'pulse',
flickr: 'search:Vancouver Whitecaps FC vs. San Jose Earthquakes',
flickrOptions: {
max: 30
}
});
});
</script>
</head>
<body>
<?php
//header
include("header.php");
?>
<div id="content">
<div id="galleria"></div>
</div>
<div id="footer"></div>
</body>
</html>
这是我的 CSS:
@font-face { font-family:"sketchscala";
src:url('sketchscalasans-webfont.ttf');
}
@font-face { font-family:"gudearegular";
src:url('gudea_regular.ttf');
}
* { margin:0;
padding:0;
}
html, body { background-color:#1A1A1A;
height:100%;
}
h1 { font-size:300%;
}
h2 { color:#6EB89F;
}
h3 { color:#7DB4B6;
}
h4 { color:#76BCAE;
}
p { font-size:50%;
}
hr { height:22px;
background-image:url('hrimage2.png');
background-repeat:repeat-x;
border:none;
}
ul { list-style-type:none;
}
li { display:inline;
}
#galleria { width:900px;
margin-left: auto;
margin-right:auto;
height:auto;
background:#000000;
}
#container { min-height:100%;
}
#header { background-image:url('debut_dark.png');
background-color:#333333;
height:100px;
width:100%;
}
#title { color:#FFFFFF;
font-family:"sketchscala";
width:723px;
position:relative;
margin-left:auto;
margin-right:auto;
top:10px;
}
#nav { font-family:"sketchscala";
color:#FFFFFF;
width:480px;
position:relative;
margin-left:auto;
margin-right:auto;
top:10px;
}
#nav a:link { color:#FFFFFF;
text-decoration:none;
}
#nav a:hover { color:#999999;
text-decoration:underline;
}
#nav a:visited { color:#FFFFFF;
text-decoration:none;
}
#content { font-family:"gudearegular";
color:#333333;
overflow:auto;
padding-bottom:271px;
padding-left:100px;
padding-top:10px;
}
#content a:link { color:#333333;
text-decoration:underline;
}
#content a:hover { color:#000000;
text-decoration:none;
}
#content a:visited { color:#333333;
text-decoration:underline;
}
#footer { position:relative;
margin-top:-271px;
height:271px;
width:100%;
clear:both;
background-image:url('bottom_border.png');
}
好极了
最佳答案
#content 上有一个 padding-left: 100px;，删除它，一切看起来都不错!
关于javascript - 为什么此幻灯片不以我的页面为中心？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13833887/