Vreemd en onverwacht resultaat
Middels onderstaande CSS verwacht ik het element 'body-wrapper' horizontaal te centreren binnen de beschikbare viewport.
.body-wrapper {
/* position:absolute; */
/* left: 50%; */
/* transform: translateX(15%); */
max-height: 99vh;
margin: auto;
/* https://codepen.io/team/css-tricks/pen/vapjge */
/* height: calc(var(--vh), 1vh) * 100; */
width: auto;
aspect-ratio: 4 / 3;
display: flex;
flex-direction: column;
/* border: 2px solid blue; */
}
Het scherm zonder 'margin: auto;' ziet er zo uit:
https://ibb.co/r7zWkXC
Het element 'body-wrapper' wil ik horizontaal centreren met 'margin: auto;'
maar dan ziet het er zo uit:
https://ibb.co/qFbNPtL
De uit-gecommentarieerde transform code heb ik ook geprobeerd, maar dat levert hetzelfde resultaat.
Kan het zijn dat het 'aspect-ratio' attribuut hier in de weg zit?
.body-wrapper {
/* position:absolute; */
/* left: 50%; */
/* transform: translateX(15%); */
max-height: 99vh;
margin: auto;
/* https://codepen.io/team/css-tricks/pen/vapjge */
/* height: calc(var(--vh), 1vh) * 100; */
width: auto;
aspect-ratio: 4 / 3;
display: flex;
flex-direction: column;
/* border: 2px solid blue; */
}
Het scherm zonder 'margin: auto;' ziet er zo uit:
https://ibb.co/r7zWkXC
Het element 'body-wrapper' wil ik horizontaal centreren met 'margin: auto;'
maar dan ziet het er zo uit:
https://ibb.co/qFbNPtL
De uit-gecommentarieerde transform code heb ik ook geprobeerd, maar dat levert hetzelfde resultaat.
Kan het zijn dat het 'aspect-ratio' attribuut hier in de weg zit?
Er zijn nog geen reacties op dit bericht.