Question

我有一个带幻灯片的响应式网站。我已将幻灯片放映设置为浏览器窗口宽度的100％，并且工作正常。问题是，幻灯片向右移动了一点，几乎就像图像左边有填充一样。结果是用户必须向右滚动才能看到整个幻灯片。我试过玩div和幻灯片本身的属性，但没有运气。任何有关此问题的帮助表示赞赏。这是我的CSS和HTML代码：

CSS

html
{
background-color:#000000;
}

body
{
margin:0auto;
padding:0;
width:100%;
}

#header
{
margin:0auto;
padding-top:0.5%;
text-align:center;
}

#logo
{
margin:0auto;
max-width:186px;
max-height:123px;
padding-top:1%;
padding-bottom:15%;
text-align:center;
}

#banner
{
width:100%;
}

#home_content
{
width:100%;
padding-top:0.25%;
}

#history_content
{
width:100%;
padding-top:0%;
}

#home_slideshow
{
padding-top:1%;
display:flex;
justify-content:center;
}

#home_slideshow
{
padding-top:1%;
display:flex;
justify-content:center;
}

hr
{
border-color:#1BB7F2;
width:100%;
padding:0%;
}

#home_footer
{
width:100%;
margin-top:60%;
}

#history_footer
{
width:100%;
margin-top:155%;
}


.crossfadeHome>figure
{
animation:imageAnimation24slinearinfinite0s;
backface-visibility:hidden;
color:transparent;
opacity:0;
position:absolute;
text-alin:center;
width:100%;
z-index:0;
margin:0auto;
}

.crossfadeHome>figure:nth-child(1)
{
background-image:url('../photos/img_1.jpg');
background-repeat:no-repeat;
}

.crossfadeHome>figure:nth-child(2)
{
animation-delay:6s;
background-image:url('../photos/img_2.jpg');
background-repeat:no-repeat;
}

.crossfadeHome>figure:nth-child(3)
{
animation-delay:12s;
background-image:url('../photos/img_3.jpg');
background-repeat:no-repeat;
}

.crossfadeHome>figure:nth-child(4)
{
animation-delay:18s;
background-image:url('../photos/img_4.jpg');
background-repeat:no-repeat;
}

@keyframesimageAnimation
{
0%
{
animation-timing-function:ease-in;
opacity:0;
}
8%
{
animation-timing-function:ease-out;
opacity:1;
}
17%
{
opacity:1
}
25%
{
opacity:0
}
100%
{
opacity:0
}
}

.crossfadeHistory>figure
{
backface-visibility:hidden;
color:transparent;
opacity:0;
position:absolute;
text-alin:center;
width:100%;
z-index:0;
margin:0auto;
}

.crossfadeHistory>figure:nth-child(1)
{
background-image:url('../photos/history_1.jpg');
background-repeat:no-repeat;
}

.crossfadeHistory>figure:nth-child(2)
{
animation-delay:7s;
background-image:url('../photos/history_2.jpg');
background-repeat:no-repeat;
}

.crossfadeHistory>figure:nth-child(3)
{
animation-delay:14s;
background-image:url('../photos/history_3.jpg');
background-repeat:no-repeat;
}

.crossfadeHistory>figure:nth-child(4)
{
animation-delay:21s;
background-image:url('../photos/history_4.jpg');
background-repeat:no-repeat;
}

@keyframesimageAnimation
{
0%
{
animation-timing-function:ease-in;
opacity:0;
}
8%
{
animation-timing-function:ease-out;
opacity:1;
}
17%
{
opacity:1
}
25%
{
opacity:0
}
100%
{
opacity:0
}
}

HTML

<!DOCTYPEhtml>

<html>

<head></head>

<body id="body">

<!--HeaderSection-->

<div id="logo">
<a href="index.html"target="_self"><img class="logo"src="graphics/logo.jpg"style="display:block;margin:0auto;width:100%;height:auto;max-width:225px;max-height:196px;vertical-align:top;"alt=""title=""></a>
</div>

<div id="header">
<p id="contact_info">
<a href="tel://555-555-5555"style="margin-right:1%;"><imgsrc="graphics/icon_phone.png"style="width:11px;height:15px;vertical-align:middle;"alt="PhoneIcon"title="Call Us!!">(518)459-9843</a>
</p>
<pid="contact_info">
<ahref="example.com"></a>
&nbsp
</p>
<p id="contact_info">
<img src="graphics/icon_clock.png"style="width:17px;height:17px;vertical-align:middle;"alt="ClockIcon"title="Our Hours">
</p>
</div>

<div id="banner">
<hr/>
<p id="page_home_header">
</p>
</div>

<div id="page_home_main">
<p id="home_content">
</p>
<p id="page_home_link">
<a href="pages/link.html"target="_self">link</a>
<br/>
<br/>
<a href="http://www.site.php"target="_blank">site</a>
</p>
</div>

<div id="home_slideshow"class="crossfadeHome">
<figure>
<img src="photos/img_1.jpg"style="width:100%;height:auto;"alt=""/>
</figure>
<figure>
<img src="photos/img_2.jpg"style="width:100%;height:auto;"alt=""/>
</figure>
<figure>
<img src="photos/img_3.jpg"style="width:100%;height:auto;"alt=""/>
</figure>
<figure>
<img src="photos/img_4.jpg"style="width:100%;height:auto;"alt=""/>
</figure>
</div>

<!--FooterSection-->
<footer id="home_footer">
<hr/>
<p id="footer_copyright"><ahref="example.net"target="_blank">&copy;<script>document.write(newDate().getFullYear())</script>mysite</a></p>
</footer>

</body>

</html>

Answer 1

确保在代码中检查拼写错误。

将margin:0auto;更改为margin:0 auto;，将text-alin:center;更改为text-align:center;。

如果您想了解有关margin，click here的更多信息。

要检查css中的错误，您可以访问CSSLint。

移动幻灯片放映不居中

1 个答案: