• Locked
No replies
Wed, 2021-01-20 13:05
motorhomer
motorhomer's picture
Offline
newbie
london
Last seen: 2 years 10 weeks ago
london
Joined: 2021-01-20
Posts: 2
Points: 4

I have iframes which are appended by ajax, I want them to be centred on the screen side by side which I have got working but I also want them to start a new line centred again when they are bigger than the DIV width container.

Code below centres a number of iframes but they overflow the container. I tried overflow auto but this did not work

<!DOCTYPE html>
<html>
  <head>
  <style>
    body{
      width: 100%;
    }
    #viewRangerContainer{
      border: solid;
      position: absoulte;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: auto;
      width: 100%;
      height: 100px;
    }
    .viewRangerFrame{
      border: solid;
      position: relative;
      display: inline-block;
      height: 90px;
      width: 8vw;
      margin-left: auto;
      margin-right: auto;
 
    }
    </style>
</head>
<body>
 <div id="viewRangerContainer">
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
 
 </div> 
</body>
</html>

Top
Tags: