Posez votre question Signaler

Comment centrer une image en css [Résolu/Fermé]

Christopher - Dernière réponse le 5 mars 2010 à 11:38
Bonjour a tous,

Je suis en train de créer mon site, et, en ce moment je créer le disign, de taille fixe. J'ai mit une image avec le nom de mon site tout en haut de la page, mais celle ci se trouve a gauche, et je voudrai la centrer. Comment faire ??


Merci d'avance


Christopher
Lire la suite 
Réponse
+99
moins plus
Il y a plusieurs cas ou le problème se résoud de façon casi-identique.
Dans le cas ou l'on essaie de centrer une balise html <img />.
- il faut savoir que la balise img n'est pas considérée comme un block par défaut
donc vous ne pouvez pratiquer un margin: 0 auto; ou margin-left: 0 auto; et margin-right: 0 auto;
que si vous appliquez comme propriété display: block;
Donc pour centrer une image il vous suffit de faire :
dans le code html :


<img src="urlimage" alt="alternativtext" />
et dans le code css :
img {
display: block;
margin: 0 auto;
height: XXXpx; /* spécifiez la hauteur de l'image, une bonne attitude à prendre */
width: XXXpx; /* spécifiez la largeur de l'image, une bonne habitude à prendre */

}


une autre façon d'afficher une image avec le css qui peut être intéréssant dans le cas ou l'on veut absolument séparer le graphisme du code html, il s'agit tout simplement de créer un div et d'y foutre un arrière-plan.
dans le code html :


<html>
<body>
<!-- quelque part dans le code -->
<div id="bandeau"></div>
<!-- quelque part dans le code -->
</body>
</html>


dans le code css :


#bandeau {
/* Dans cette methode inutile d'ajouter display: block un div est block par defaut mais vous le pouvez */
background : transparent url("lien image") no-repeat;
height : XXXpx;
width : XXXpx;
margin : 0 auto;
}


Encore une autre façon de centrer une image sans la balise <img /> et sans le div c'est le span :
dans le code html :


<span class="bandeau"></span>
dans le code css :
span.bandeau
{
background : transparent url("lien image") no-repeat;
height : 49px;
width : 163px;
margin : 0 auto;
display : block; /* trés important ici car le span n'est pas un block par defaut */
}


Petit rappel :
pour modifier un élément html quelqu'il soit par le biais de l'attribut <balise class="classification" /> il faut dans le css :


balise.classification
{
bla bla bla.
}


***
pour modifier un élément html quelqu'il soit par le biais de l'attribut <balise id="identification" /> il faut dans le css :
#identification /* on stylise la balise par son id */


{
bla bla bla.
}



CSS pour présenter vos images

Sandbox- 5 mars 2010 à 11:38
Le display : block; & margin: 0 auto marche nickel, merci du coup de pouce !

Pour répondre rapidement à quelques autres propositions :
* L'utilisation du background: url("tralala.jpg") gêne l'utilisation de background-color, si on veut faire un cadre par dessus un papier peint c'est pas terrible.
* text-align ne vaut que pour le ... texte (ça porte bien son nom :D)

L'idéal c'est donc de placer sa balise <img /> et de l'encadrer d'un div, c'est propre, flexible, et ça s'inclut bien dans le squelette de vos pages.
Annonces
 
moins plus
Réponse
+17
moins plus
ben tu renseignes la largeur de l'image, la position écran moins la moitié de l'image (vu que c'est le coin gauche qui est le référent)

Ce qui donne:
width: 400px; -------> largeur de l'image ou div
left: 50%; -------> position écran
margin-left: -200px; ----> reculer de la moitié :-)

ou tu mets en "auto" (gaffe à la compréhension des navigateurs):

margin-left: auto;
margin-right: auto;
width: ...; ----> largeur obligatoire pour être centré


Tu n'indiques pas les " -----> blabla" évidemment sinon tu mets des /*---->blabla*/ pour commentaires

BoringBugz 238Messages postés samedi 21 juin 2008Date d'inscription 2 janvier 2014Dernière intervention - 30 sept. 2009 à 01:43
très pertinent, merci beaucoup
Annonces
 
moins plus
Réponse
+7
moins plus
Sémantiquement parlant, le background-image dans le CSS n'a strictement aucun intérêt.
Il vaut mieux coder une image en dur sans oublier les balises "alt" sur les images pour donner
du poids aux mots.
Les marges négatives fonctionnent très bien sur tous les navigateurs : http://latarteauchips.free.fr/css/css-centrer-bloc.php

Ce document intitulé «  Comment centrer une image en css  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.