Comment centrer une image en css
Résolu/Fermé
A voir également:
- Centrer image css
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? ✓ - Forum Windows
- Recherche par image - Guide
- Retour à la ligne css - Forum CSS
- Deplacer une image css - Astuces et Solutions
- Image iso - Guide
3 réponses
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
5 mars 2010 à 11:38
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.