Comment centrer une image en css
Résolu/Fermé
Christopher
-
Sandbox -
Sandbox -
A voir également:
- Centrer une image css
- Centrer image css - Meilleures réponses
- Css centrer une image - Meilleures réponses
- Comment centrer une image en css ✓ - Forum - CSS
- Centrer une image dans un div ✓ - Forum - HTML
- Centrer une image à la taille de la fenêtre du navigateur ✓ - Forum - CSS
- Centrer background image css - Forum - HTML
- Centrer un texte sur une image css ✓ - Forum - CSS
3 réponses
zinkweb
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
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
king
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
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
informatique facile
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
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
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.