为什么此幻灯片没有以我的页面为中心？答案

【问题标题】：Why is this slideshow not centering on my page?为什么此幻灯片没有以我的页面为中心？
【发布时间】：2012-11-29 19:27:12
【问题描述】：

这是我正在开发的网站的链接：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');
                }

HAAAALP

【问题讨论】：

标签： javascript html css center

【解决方案1】：

#content 上有一个 padding-left: 100px;，删除它，一切看起来都很好！

【讨论】：

啊啊啊谢谢！我为另一个有文字的页面做了这个。 Dang，将不得不为该页面做一个单独的 css。
只是一个建议：如果您知道master page 的概念，请尝试在css 中做同样的事情，将通用样式保留在全局.css 中。并将特定于页面的 css 命名空间保存在单独的文件中。 :)

【解决方案2】：

删除您的#content 上的padding-left id

#content {
    color: #333333;
    font-family: "gudearegular";
    overflow: auto;
    padding-bottom: 271px;
    padding-left: 100px; //remove this line 
    padding-top: 10px;
}

【讨论】：

【解决方案3】：

在 geordie.css 中转到您的#content 样式并禁用“padding-left: 100px;”。之后应该看起来不错。

【讨论】：