Centralize Divs responsibly

Asked

Viewed 162 times

6

Next, I always looked for a solution to this type of problem, but never found. I have the following codes.

<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>

The allboxframes is the box where the div is inserted, and box-frames are the Divs that I centered, and aligns left by the float, but when decreasing the screen resolution, the frames remain aligned left, thus leaving a space on the right. I would like to know if there is a way to leave them centered on the page next to each other, as it is now, but by lowering the page, for example, three aligned to the center at the top, and two aligned to the center at the bottom. If possible.

I saw something about display: flex; but I don’t know how to use.

javascript html css float

2 answers

5


Your HTML has some problems, first you are putting the same ID in various elements, this is not recommending, IDs should be unique. After you are using the tag <center> this tag is obsolete, can stop working at any time and leave you in the lurch, use is not recommended.

inserir a descrição da imagem aqui

Now about the code. One option is to use Flex, together with flex-wrap and justfy-content to align everything in the center, that way the elements go "breaking the line" one after the other. That way you don’t need to use float in the elements, because the very flex will adjust the elements.

Follow the image code above.

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>

  • Thank you very much for your answer, Hugo. My problem has been solved. Thanks for the advice too, you’ve certainly contributed to my learning route. Good morning!

  • 2

    @Lucasmorse, I’m glad you could help! Here’s a guide to Flex that can really help you understand the concepts https://css-tricks.com/snippets/css/a-guide-to-flexbox/

0

Browser other questions tagged javascript html css float

You are not signed in. Login or sign up in order to post.