28172 sujets

CSS et mise en forme, CSS3

Bonsoir à tous,

Ce rapide message pour vous dire que j'ai centré une photo en utilisant la balise <img> avec appel à la CSS.

Ex:
HTML:
<div class="vign"><a href="mapage.php" title="lien"><img src="img/1.jpg" alt="Image" title="Coups de coeur" border="0" /></a></div>


CSS
.vign {
  height: 150px; 
  width: 200px;
  border:solid 1px #666;
  margin : 0 auto; 
  }


Bref, la photo est parfaitement centrée sur FireFox et IE7. Seulement, la balise <img> n'est pas de type block, mais inline. Or, lorsque j'écris dans mon CSS...

.vign {
  height: 150px; 
  width: 200px;
  border:solid 1px #666;
  text-align: center; 
  }


... la photo n'est plus centrée sur Firefox. Par contre, IE 7 s'en fout complètement, il laisse la photo au centre.

Auriez-vous une explication car j'avoue que cela m'intrigue.

Merci.
salut,

as-tu rafraichi la page sur ie7 ?

parce j'ai teste ton bout de code , et il se comporte correctement chez moi

1er css centre la div sur la page.

2ieme css centre le contenu de la div.

ou j'ai pas compris ta question.
Merci beaucoup pour ta réponse.
J'ai refait quelques tests mais pas de changements. Mais ce n'est pas grave car le code fonctionne sur tous les navigateurs.
Merci encore.
Je pense que tu t'es un peu mélanger les pinceaux.

Comme le souligne Flattazor, la premier solution centre la div sur la page (et donc l'image si celle ci à la même largeur que la div. La seconde laisse la div à gauche de l'écran mais centre son contenu. Si tu souhaite centrer la div dans la page ET l'image dans la div il faut utiliser un mélange de tes deux solutions :

.vign {
  height: 150px; 
  width: 200px;
  border:solid 1px #666;
  margin : 0 auto; 
  text-align: center; 
}


Par conter, je me permet d'attirer ton attention sur la mauvaise utilisation de alt que tu fais. alt="Image" n'apporte aucune information utile pour l'utilisateur qui ne peux voir les images, le contenu de alt DOIT être le même que celui porté par l'image (title en revanche n'est pas tellement utilisé, surtout sur une image, à la rigueur sur un lien dont le titre n'est pas très évoquatif).