Menu

Comment centrer un logo dans un header ?

Messages postés
29
Date d'inscription
mercredi 24 décembre 2014
Statut
Membre
Dernière intervention
2 mars 2019
-
Comment centrer un logo dans un header ?



Salut a tous,



J'essai depuis quelques jours de centrer mon logo dans le header d'un site sans succès, le logo se place pas au centre.

voici mon code css:

body.template-index #mobileNavBar {
background-image: url(logo.png);
margin:auto;
}



et voici le résultat que j'aimerais avoir:




Une idée ?



Merci
Afficher la suite 

4 réponses

0
Merci
Salut, une petite recherche aurait pu donner ça:

https://www.w3schools.com/css/css_background.asp

donc indiquer la propriété background-position dans la notation raccourcie (simplement background) ou la rajouter à part.
Les unités peuvent être ce qu'on veux, par exemple "0 50%;" pour centrer horizontalement.
Commenter la réponse de largefinger
Messages postés
29
Date d'inscription
mercredi 24 décembre 2014
Statut
Membre
Dernière intervention
2 mars 2019
0
Merci
Merci super le lien..
Commenter la réponse de foodplus
Messages postés
29
Date d'inscription
mercredi 24 décembre 2014
Statut
Membre
Dernière intervention
2 mars 2019
0
Merci
Avec ce code ci-dessous mon logo est centré que si je le centre avec des repère sur Photoshop par contre si je centre pas le logo sur Photoshop lors de l'enregistrement alors le code ci-dessus n'a aucun effet.. bizarre..

body.template-index #mobileNavBar {
background-image: url(logo.png);
background-position:center;
}
bg62
Messages postés
23216
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
17 juin 2019
1618 -
??? Photoshop n'a rien à voir là-dedans ... tu crées un logo de ???? 450px par 300 en png ( rognage de l'image faite auparavant ) et ensuite ne compte plus que 'ton' fichier *.png
Commenter la réponse de foodplus
Messages postés
29
Date d'inscription
mercredi 24 décembre 2014
Statut
Membre
Dernière intervention
2 mars 2019
0
Merci
Pourtant sur photoshop lorsque le logo n'est pas au centre alors il ne sera pas centré sur mon header..

Qu'entendez vous par rognage ? c'est pareil que le recadrage ?
centre? un logo = une image, centrée avec elle même? ça veut pas dire grand chose. Rognage et recadrage c'est si vous avez de l'espace libre autant le supprimer puisque ça alourdit le fichier d'avoir à tenir en compte qu'il y a des zones qui n'ont pas à s’afficher.
La mise en page = CSS UNIQUEMENT, contrairement au graphisme print où seul le résultat compte.
Donc si vous devez centrer une image vous la centrez en CSS, cela permet de pouvoir adapter (et facilement changer) quand on veut une mise en page.
Photoshop sert à créer une image, globalement rectangulaire. Si vous devez décaler celle ci dans UNE MISE EN PAGE WEB il faut le faire avec les outils web et NON plus un logiciel d'édition d'image.
Commenter la réponse de foodplus