Vreemd en onverwacht resultaat

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jan Kila

Jan Kila

23/07/2024 13:57:31
Quote Anchor link
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?
 
Er zijn nog geen reacties op dit bericht.



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.