6

Seguinte, sempre procurei uma solução pra esse tipo de problema, mas nunca encontrei. Eu tenho os seguintes códigos.

<style>
   .allboxframes {
   margin: 0 auto;
   max-width: 100%;
   }
   .box-frames {
   margin: 0 auto;
   float: left;
   padding: 5px;
   width: 250px;
   height: 250px;
   }
   .frames{
   width: 240px;
   height: 180px;
   margin: 0 auto;
   }
</style>

<div class="welcome-banner">
   <div class="banner-content">
  <div class="allboxframes">
     <div class="box-frames">
        <div class="frames">
           <span id='wrapper'> <iframe id='scaled-frame' scrolling="no" src=''></iframe></span>
        </div>
        <br />
        <center>
           <div class="button">
              <a href="" target="_blank">Rede LAN</a>
           </div>
        </center>
     </div>
     <div class="box-frames">
        <div class="frames">
           <span id='wrapper'> <iframe id='scaled-frame' src=''></iframe></span>
        </div>
        <br />
        <center>
           <div class="button">
              <a href="" target="_blank">Rede Segurança</a>
           </div>
        </center>
     </div>
     <div class="box-frames">
        <div class="frames">
           <span id='wrapper'> <iframe id='scaled-frame' src=''></iframe></span>
        </div>
        <br />
        <center>
           <div class="button">
              <a href="" target="_blank">Rede WAN</a>
           </div>
        </center>
     </div>
     <div class="box-frames">
        <div class="frames">
           <span id='wrapper'> <iframe id='scaled-frame' src=''></iframe></span>
        </div>
        <br />
        <center>
           <div class="button">
              <a href="" target="_blank">Rede DataCenter</a>
           </div>
        </center>
     </div>
     <div class="box-frames">
        <div class="frames">
           <span id='wrapper'> <iframe id='scaled-frame' src=''></iframe></span>
        </div>
        &#013; <br />
        <center>
           <div class="button">
              <a href="" target="_blank">Rede Convenios</a>
           </div>
        </center>
     </div>
  </div>
   </div>
</div>

O allboxframes é a caixa onde a div está inserida, e box-frames são as divs que eu centralizei, e se alinha esquerda pelo float, porém ao diminuir a resolução da tela, os frames continuam alinhados a esquerda, deixando assim, um espaço a direita. Gostaria de saber se existe uma forma de deixar eles centralizados na pagina um ao lado do outro, como está agora, mas ao diminuir a pagina, fiquem, por exemplo, três alinhados ao centro em cima, e dois alinhados ao centro em baixo. Se possível.

Eu vi algo sobre display: flex; mas não sei como utilizar.

2 Respostas 2

5

Seu HTML tem alguns problemas, primeiro que vc está colocando o mesmo ID em vários elementos, isso não é recomendando, IDs devem ser únicos. Depois vc está usando a tag <center> essa tag está obsoleta, pode deixar de funcionar a qualquer momento e te deixar na mão, o uso dela não é recomendado.

inserir a descrição da imagem aqui

Agora sobre o código. Uma opção é usar Flex, em conjunto com flex-wrap e justfy-content para alinhar tudo no centro, dessa forma os elementos vão "quebrando a linha" um após o outro. Dessa forma vc não precisa usar float nos elementos, pois o próprio flex vai ajustar os elementos.

Segue o código da imagem acima.

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.allboxframes {
    margin: 0 auto;
    max-width: 100%;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.box-frames {
    margin: 0 auto;
    padding: 5px;
    width: 250px;
    height: 250px;
}

.frames {
    width: 240px;
    height: 180px;
    margin: 0 auto;
}
iframe {
    width: 100%;
}
<div class="welcome-banner">
    <div class="banner-content">
        <div class="allboxframes">
            <div class="box-frames">
                <div class="frames">
                    <span id='wrapper'> <iframe id='scaled-frame' scrolling="no" src=''></iframe></span>
                </div> <br />
                <center>
                    <div class="button">
                        <a href="" target="_blank">Rede LAN</a>
                    </div>
                </center>
            </div>

            <div class="box-frames">
                <div class="frames">
                    <span id='wrapper'> <iframe id='scaled-frame' src=''></iframe></span>
                </div> <br />
                <center>
                    <div class="button">
                        <a href="" target="_blank">Rede Segurança</a>
                    </div>
                </center>
            </div>

            <div class="box-frames">
                <div class="frames">
                    <span id='wrapper'> <iframe id='scaled-frame' src=''></iframe></span>
                </div> <br />
                <center>
                    <div class="button">
                        <a href="" target="_blank">Rede WAN</a>
                    </div>
                </center>
            </div>

            <div class="box-frames">
                <div class="frames">

                    <span id='wrapper'> <iframe id='scaled-frame' src=''></iframe></span>
                </div> <br />
                <center>
                    <div class="button">
                        <a href="" target="_blank">Rede DataCenter</a>
                    </div>
                </center>
            </div>

            <div class="box-frames">
                <div class="frames">
                    <span id='wrapper'> <iframe id='scaled-frame' src=''></iframe></span>
                </div> &#013; <br />
                <center>
                    <div class="button">
                        <a href="" target="_blank">Rede Convenios</a>
                    </div>
                </center>
            </div>
        </div>
    </div>
</div>

2
  • Muito obrigado pela resposta, Hugo. O meu problema foi resolvido. Obrigado pelos conselhos também, você, com certeza, contribuiu para minha rota de aprendizado. Bom dia! Commented 11/03/2019 às 11:28
  • 2
    @LucasMorse que bom que ajudou ai! Aqui tem um guia de Flex que pode te ajudar muito a entender os conceitos css-tricks.com/snippets/css/a-guide-to-flexbox
    – hugocsl
    Commented 11/03/2019 às 11:29
0

Se não quer utilizar nenhum framework para isso aconselho estudar sobre FlexBox, é uma excelente forma de arrumar seu código:

https://origamid.com/projetos/flexbox-guia-completo/ https://desenvolvimentoparaweb.com/css/flexbox/#section_justify-content

Com uma leitura rápida irá ver como é simples adaptar ao seu código e deixá-lo responsivo

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .