Salut
J'aimerais centrer une image mais je ne sais pas comment faire.
Pour centrer un texte c'est : text-align: center
Mais pour une image?
merci
<modérateur: déplacé en (x)HTML et CSS>
Version complète: sur le forum Webmaster Hub : Comment centrer une image?
Voici une solution :
css:
html:
css:
CODE
img.centered {
display: block;
margin-left: auto;
margin-right: auto }
display: block;
margin-left: auto;
margin-right: auto }
html:
CODE
<img class="centered" src="..." alt="...">
en principe, si tu mets dans un div que tu as préalablement défini la css avec un text-align:center; ca devrait marcher.... non?
Yuston je confirme. Si tu mets ton image dans un div et que tu définis une classe avec text-align: center alors l'image sera centrée.
Non, non...
Il y a plein de cas où cela ne marchera pas.
Mais à la base le principe est simple : déjà, pour que le navigateur puisse centrer, il faut que la largeur du contenant soit connue de lui. Allez centrer une image dans un 'div' dont vous ne connaissez pas la taille, pas facile...
Et deuzio, il faut qu'il connaisse la taille de l'élément à centrer. Et là, le "display:" (inline / block) de l'image peut interagir...
Il y a plein de cas où cela ne marchera pas.
Mais à la base le principe est simple : déjà, pour que le navigateur puisse centrer, il faut que la largeur du contenant soit connue de lui. Allez centrer une image dans un 'div' dont vous ne connaissez pas la taille, pas facile...
Et deuzio, il faut qu'il connaisse la taille de l'élément à centrer. Et là, le "display:" (inline / block) de l'image peut interagir...
Pour ne pas te fatiguer la tache avec les css meme si c'est preferebale utilise:
<center> ton image </center>
<center> ton image </center>
Salut,
D'une part, la balise <center> n'a pas forcément le même comportement sur tous les navigateurs, d'autre part elle est dépréciée depuis des années par le w3c du fait qu'il s'agisse d'une balise de présentation alors que l'HTML est un langage de marquage sémantique de contenu.
CITATION(scarface13000 @ mardi 29 novembre 2005, 20h22)
Pour ne pas te fatiguer la tache avec les css meme si c'est preferebale utilise:
<center> ton image </center>
Il serait quand même sympa d'éviter les conseils vérolés comme celui-ci <center> ton image </center>
D'une part, la balise <center> n'a pas forcément le même comportement sur tous les navigateurs, d'autre part elle est dépréciée depuis des années par le w3c du fait qu'il s'agisse d'une balise de présentation alors que l'HTML est un langage de marquage sémantique de contenu.
Bonjour à tous chez ami collègue !
J'ai essayé cette petite technique qui sur le coup m'a parru tres ingénieuse ! malheureusement apres réflexion, j'ai observé une incompatibilité avec notre cher IE...
Vous allez me dire : "normal est toujours là pour nous faire chier !"
Que ferait on sans IE !
Enfin bref :
Ce code marche à la perfection sous FIREFOX et le cauchemard commence sous ie !
La solution temporaire que j'ai utilisé c'est de placer manuellement les images avec une margin-left: 5px; mais sa m'amuse de me compliquer la vie
Merci de vos illuminations...
J'ai essayé cette petite technique qui sur le coup m'a parru tres ingénieuse ! malheureusement apres réflexion, j'ai observé une incompatibilité avec notre cher IE...
Vous allez me dire : "normal est toujours là pour nous faire chier !"
Que ferait on sans IE !
Enfin bref :
CODE
Mon CSS :
h1
{
margin: 4px 0 0 10px;
color: #7d7d7d;
font-size: 0.9em;
}
a img
{
border: none;
}
img.center
{
display: block;
margin-left: auto;
margin-right: auto
}
#gauche
{
float: left;
width: 197px;
}
.g_titre
{
position: absolute;
float: left;
width: 197px;
height: 22px;
background-image: url("images/g_titre.png");
background-repeat: no-repeat;
}
#g_menu {
list-style-image: url("images/fleche.gif");
margin: 0;
padding: 0;
}
#g_menu ul {
margin-top: 5px;
}
#g_menu li {
margin-bottom: 10px;
margin-left: 28px;
line-height: 5px;
}
#g_menu a {
margin: 0 2px;
color: #282828;
font-size: 0.8em;
text-decoration: none;
}
#g_menu a:hover {
text-decoration: none;
color: #4472b2;
font-size: 0.9em;
}
h1
{
margin: 4px 0 0 10px;
color: #7d7d7d;
font-size: 0.9em;
}
a img
{
border: none;
}
img.center
{
display: block;
margin-left: auto;
margin-right: auto
}
#gauche
{
float: left;
width: 197px;
}
.g_titre
{
position: absolute;
float: left;
width: 197px;
height: 22px;
background-image: url("images/g_titre.png");
background-repeat: no-repeat;
}
#g_menu {
list-style-image: url("images/fleche.gif");
margin: 0;
padding: 0;
}
#g_menu ul {
margin-top: 5px;
}
#g_menu li {
margin-bottom: 10px;
margin-left: 28px;
line-height: 5px;
}
#g_menu a {
margin: 0 2px;
color: #282828;
font-size: 0.8em;
text-decoration: none;
}
#g_menu a:hover {
text-decoration: none;
color: #4472b2;
font-size: 0.9em;
}
CODE
Mon HTML :
<ul id='g_menu'>
<div class="g_titre">
<h1>Informations diverses</h1>
</div><br /><br />
<li><a href='#'>lien 1</a></li>
<li><a href='#'>lien 1</a></li>
</ul>
<div>
<a href="#">
<img class="center" src="images/ban.png" alt='image' title='image' /></a>
<br />
</div>
<ul id='g_menu'>
<div class="g_titre">
<h1>Informations diverses</h1>
</div><br /><br />
<li><a href='#'>lien 1</a></li>
<li><a href='#'>lien 1</a></li>
</ul>
<div>
<a href="#">
<img class="center" src="images/ban.png" alt='image' title='image' /></a>
<br />
</div>
Ce code marche à la perfection sous FIREFOX et le cauchemard commence sous ie !
La solution temporaire que j'ai utilisé c'est de placer manuellement les images avec une margin-left: 5px; mais sa m'amuse de me compliquer la vie
Merci de vos illuminations...
Salut
Tente de modifier ta class .center dans ton fichier CSS comme suit
Je n'ai pas IE pour vérifier, mais il me semble qu'il y a un bug sur l'interprétation des centrages par marge, et que la solution était de rajouter un text-align: center
Tente de modifier ta class .center dans ton fichier CSS comme suit
CODE
img.center
{
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
{
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
Je n'ai pas IE pour vérifier, mais il me semble qu'il y a un bug sur l'interprétation des centrages par marge, et que la solution était de rajouter un text-align: center
avec beaucoup de retard...
fonctionne avec ie6, opera et firefox, netscape, et k-meleon
CODE
img.centre
{
display:block;
clear:both;
margin-left:auto;
margin-right:auto;
}
{
display:block;
clear:both;
margin-left:auto;
margin-right:auto;
}
fonctionne avec ie6, opera et firefox, netscape, et k-meleon
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.