Centereer een logo precies in het centrum

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


Geplaatst

in

, ,

door

Tags:

Reacties

Geef een reactie

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