为什么我的幻灯片不在页面中央？导航栏在另一个文件中。
已经尝试过 width: auto 和 text-align: center.
我已经在互联网上搜索过，找不到任何可以解决我的问题的东西。但据我所知，这是因为 padding-left 但我找不到它。
对不起，葡萄牙语的类(class)和 ID 以及我的英语。
PS.:如果我这样做，它会保持不变。
#conteudo{
text-align: center;
}
#conteudo{
padding: 5px;
text-align: center;
}
main {
height: auto;
text-align: center;
margin-left: auto;
margin-right: auto;
}
div{
background-color: transparent;
}
.div_top_img_pagina {
background-image: linear-gradient(rgba(8, 124, 8, 0.5), rgba(0,0,0,0.9)), url("../videos/img\ top.png");
background-position: center;
background-repeat: no-repeat;
background-position-y: 50px;
}
.jogos{
display: inline-block;
margin: 5px;
height: 279px;
width: 279px;
border-radius: 20px;
background-color: blue;
}
.jogos:hover {
box-shadow: 0 0px 20px black;
}
#slideshow {
display: block;
overflow: hidden;
height: 510px;
width: 1100px;
margin: 0 auto 20px auto;
text-align: center;
border-radius: 20px;
}
.slide-wrapper {
width: 5500px;
animation: slide 35s ease infinite;
}
.slide {
float: left;
height: 510px;
width: 1100px;
}
.slide:nth-child(1) {
background: #D93B65;
}
.slide:nth-child(2) {
background: #037E8C;
}
.slide:nth-child(3) {
background: #36BF66;
}
.slide:nth-child(4) {
background: #D9D055;
}
.slide:nth-child(5) {
background: rgb(185, 30, 216);
}
.slide-number {
color: #000;
text-align: center;
font-size: 10em;
}
@keyframes slide {
0% {margin-left: 0px;}
10% {margin-left: 0px;}
20% {margin-left: -1100px;}
30% {margin-left: -1100px;}
40% {margin-left: -2200px;}
50% {margin-left: -2200px;}
60% {margin-left: -3300px;}
70% {margin-left: -3300px;}
80% {margin-left: -4400px;}
90% {margin-left: -4400px;}
}<body>
<nav>
<ul>
<a href="index.html">
<li class="navbar_logo_index"></li>
</a>
<li><a href="eventos.html">Eventos</a></li>
<li><a href="noticias.html">Notícias</a></li>
<li><a href="top_jogos.html">TOPs</a></li>
<li><a href="analises.html">Análises</a></li>
<li><a href="galeria.html">Galeria</a></li>
<li class="menuSelecionado"><a href="videos.html">Vídeos</a></li>
<li><a href="livestreams.html">Livestreams</a></li>
<li><a href="cronologia.html">Cronologia</a></li>
<li><a href="sobre_nos.html">Sobre nós</a></li>
<li class="bt_lupa" id="bt_lupa"></li>
<li class="bt_mudacor" id="bt_mudacor"></li>
</ul>
</nav>
<main>
<div class="div_top_img_pagina">
<h1>VIDEOS</h1>
</div>
</div>
<div id="conteudo">
<!-- INICIO DA PARTE DO CODIGO INDIVIDUAL -->
<div id="slideshow">
<div class="slide-wrapper">
<div class="slide">
<h1 class="slide-number">1</h1>
</div>
<div class="slide">
<h1 class="slide-number">2</h1>
</div>
<div class="slide">
<h1 class="slide-number">3</h1>
</div>
<div class="slide">
<h1 class="slide-number">4</h1>
</div>
<div class="slide">
<h1 class="slide-number">5</h1>
</div>
</div>
</div>
<div id="jogosDiv">
<div class="jogos">teste</div>
<div class="jogos">teste</div>
<div class="jogos">teste</div>
<div class="jogos">teste</div>
<div class="jogos">teste</div>
<div class="jogos">teste</div>
<div class="jogos">teste</div>
<div class="jogos">teste</div>
<div class="jogos">teste</div>
<div class="jogos">teste</div>
<div class="jogos">teste</div>
<div class="jogos">teste</div>
</div>
<!-- FIM DA PARTE DO CODIGO INDIVIDUAL -->
</div>
</main>
<footer>
<p>Entre em contacto connosco através das redes sociais<br><br>Facebook | Instagram | Twitter | </p>
</footer>
</body>最佳答案
因为您将其大小设置为 width: 1100px;。
这是一个以百分比表示大小的示例 (width: 80%;)，因此它将取决于容器的大小并适应任何屏幕大小:
注意:我还将@keyframes 和宽度转换为百分比，以保持一致。
#conteudo{
padding: 5px;
text-align: center;
}
main {
height: auto;
text-align: center;
margin-left: auto;
margin-right: auto;
}
div{
background-color: transparent;
}
.div_top_img_pagina {
background-image: linear-gradient(rgba(8, 124, 8, 0.5), rgba(0,0,0,0.9)), url("../videos/img\ top.png");
background-position: center;
background-repeat: no-repeat;
background-position-y: 50px;
}
.jogos{
display: inline-block;
margin: 5px;
height: 279px;
width: 279px;
border-radius: 20px;
background-color: blue;
}
.jogos:hover {
box-shadow: 0 0px 20px black;
}
#slideshow {
display: block;
overflow: hidden;
height: 510px;
width: 80%;
margin: 0 auto 20px auto;
text-align: center;
border-radius: 20px;
}
.slide-wrapper {
width: 500%;
animation: slide 35s ease infinite;
}
.slide {
float: left;
height: 510px;
width: 20%;
}
.slide:nth-child(1) {
background: #D93B65;
}
.slide:nth-child(2) {
background: #037E8C;
}
.slide:nth-child(3) {
background: #36BF66;
}
.slide:nth-child(4) {
background: #D9D055;
}
.slide:nth-child(5) {
background: rgb(185, 30, 216);
}
.slide-number {
color: #000;
text-align: center;
font-size: 10em;
}
@keyframes slide {
0% {margin-left: 0%;}
10% {margin-left: 0%;}
20% {margin-left: -100%;}
30% {margin-left: -100%;}
40% {margin-left: -200%;}
50% {margin-left: -200%;}
60% {margin-left: -300%;}
70% {margin-left: -300%;}
80% {margin-left: -400%;}
90% {margin-left: -400%;}
}<body>
<main>
<div class="div_top_img_pagina">
<h1>VIDEOS</h1>
</div>
</div>
<div id="conteudo">
<!-- INICIO DA PARTE DO CODIGO INDIVIDUAL -->
<div id="slideshow">
<div class="slide-wrapper">
<div class="slide">
<h1 class="slide-number">1</h1>
</div>
<div class="slide">
<h1 class="slide-number">2</h1>
</div>
<div class="slide">
<h1 class="slide-number">3</h1>
</div>
<div class="slide">
<h1 class="slide-number">4</h1>
</div>
<div class="slide">
<h1 class="slide-number">5</h1>
</div>
</div>
</div>
<div id="jogosDiv">
<div class="jogos">teste</div>
<div class="jogos">teste</div>
<div class="jogos">teste</div>
<div class="jogos">teste</div>
<div class="jogos">teste</div>
<div class="jogos">teste</div>
<div class="jogos">teste</div>
<div class="jogos">teste</div>
<div class="jogos">teste</div>
<div class="jogos">teste</div>
<div class="jogos">teste</div>
<div class="jogos">teste</div>
</div>
<!-- FIM DA PARTE DO CODIGO INDIVIDUAL -->
</div>
</main>
</body>关于html - 为什么我的幻灯片不在页面中央？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53807740/