移动幻灯片不居中答案

【问题标题】：Mobile Slideshow Not Centering移动幻灯片不居中
【发布时间】：2017-08-20 11:17:25
【问题描述】：

我有一个带有幻灯片的响应式网站。我已将幻灯片设置为浏览器窗口宽度的 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>

【问题讨论】：

你能在 jsfiddle.net 上做个小提琴吗
@user8385857 你检查我的答案了吗？
嗨。我在玩小提琴，不确定它是否有所需的输出。这是链接：jsfiddle.net/suokx2ew/3

标签： html css responsive-design slideshow

【解决方案1】：

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

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

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

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

【讨论】：

感谢您的建议。空白处缺少的空间是由于我的帖子中的格式错误，而不是在我的实际文件中。另一方面，文本对齐错字是一个疏忽。我修复了对齐，但幻灯片仍被推到右侧。
嗨。我想我们几乎是在同一时间发布的。请看我的评论。你还有什么推荐我试试的吗？谢谢。
我看不到您的任何幻灯片图像。请更改您的图像路径并重新生成您所要求的内容？
我使用 URL 指向我在网上找到的相同大小的图像。我不确定为什么图像没有显示在我的小提琴中。它们在本地测试时出现。
您在评论中提供的链接包含src="graphics/icon_clock.png"本地路径。你可以给我发更新的小提琴。请务必更新上述问题并让我知道，因为 cmets 不用于讨论。