1 reply [Last post]
motorhomer
motorhomer's picture
Offline
newbie
london
Last seen: 21 weeks 6 hours 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

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;

}

cheaphostuk
cheaphostuk's picture
Offline
newbie
London
Last seen: 16 weeks 3 days ago
London
Joined: 2021-02-21
Posts: 1
Points: 1

How to centre iframes within DIV and stop overflow

Try adding...

flex-wrap: wrap;

to #viewRangerContainer and then removing justify and align elements