Voor het maken van een site gebruik ik regelmatig een tijdelijke pagina todat de uiteindelijke site klaar is. In deze tijdelijke pagina wil ik dan een logo plaatsen dat precies gecentreerd wordt in het midden van het scherm, dat is, zowel verticaal en horizontaal gecentreerd.

Eerste poging was om het logo element een class “gecentreerd”  te geven en vervolgens class te definiëren als:


.centered {

position: fixed;

top: 50%;

left: 50%;

}

not-centered

Maar werkt niet helemaal. De linkerbovenhoek van de afbeelding komt nu precies in het midden van de pagina, niet in het midden van de afbeelding in het midden van de pagina.

Om het logo precies gecentreerd te krijgen  is het een kwestie van toevoegen van een negatieve marge voor  boven van de helft van de hoogte van het logo, en een negatieve linkermarge van de helft van de breedte van het logo  . Voor dit voorbeeld:

 .centered {
 position: fixed;
 top: 50%;
 left: 50%;
 margin-top: -50px;
 margin-left: -100px;
}

centered

Recommended Posts

No comment yet, add your voice below!


Add a Comment

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *