Comment centrer un logo dans un header ?

Fermé
foodplus Messages postés 29 Date d'inscription mercredi 24 décembre 2014 Statut Membre Dernière intervention 2 mars 2019 - Modifié le 1 mars 2019 à 11:45
 largefinger - 3 mars 2019 à 14:14
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

4 réponses

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.
0
foodplus Messages postés 29 Date d'inscription mercredi 24 décembre 2014 Statut Membre Dernière intervention 2 mars 2019
1 mars 2019 à 14:57
Merci super le lien..
0
foodplus Messages postés 29 Date d'inscription mercredi 24 décembre 2014 Statut Membre Dernière intervention 2 mars 2019
1 mars 2019 à 16:26
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;
}
0
bg62 Messages postés 23654 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 8 novembre 2024 2 385
1 mars 2019 à 16:57
??? 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
0
foodplus Messages postés 29 Date d'inscription mercredi 24 décembre 2014 Statut Membre Dernière intervention 2 mars 2019
2 mars 2019 à 10:32
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 ?
0
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.
0