Question

为什么我的幻灯片放映不在页面中心？导航栏在另一个文件中。
已经尝试使用宽度：自动和文本对齐：居中。
我已经在互联网上搜索了，找不到任何可以帮助解决我的问题的东西。但是据我了解，这是因为有一个左填充，但我找不到它。
抱歉，葡萄牙语和我的英语都没有。
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>

Answer 1

因为您将其大小设置为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>

为什么我的幻灯片放映不在页面中心？

1 个答案: