28172 sujets

CSS et mise en forme, CSS3

Vertical-align qui n'en fait qu'à sa tête

Bonjour à tous,

Je cherche à faire un header pour mon site, de la façon suivante :


<span style="
  position: fixed;
  left: 0px;
  top: 0px;
  opacity:0.9;
  filter:alpha(opacity:90);
  background: url('./styles/images/topnav.png');
  background-size:5%;
  width: 100%;
  height: 31px;
  
">
<div style="
  text-align:center;
  font-size:15px;
">
<img border="0" src="{dpath}images/metall.gif" width="42" height="22"> {metal} 
<img border="0" src="{dpath}images/kristall.gif" width="42" height="22"> {crystal} 
<img border="0" src="{dpath}images/deuterium.gif" width="42" height="22" /> {deuterium} 
</div>


</span>


Comment centrer au vertical les images ET le texte ?
Jusqu'à maintenant, je tentais vertical-align:middle; sur une image, ça marche... sur la seconde, ça marche, et la troisième... remet les deux premières en haut...

Quelqu'un pour m'aider svp ? Smiley smile

Merci Smiley lol
Modifié par Youplaboum (27 Dec 2010 - 00:40)
Administrateur
Youplaboum a écrit :
Pardon, j'ai écrit trop vite (j'ai confondu text-align et vertical-align)...
J'ai bien utilisé middle...


Dans ce cas, il faudrait voir le code ou la page en ligne puisque cela me semble correct.
Tu as tout Smiley ohwell
Est-ce possible que ça soit un bogue de Chrome ?
Ça fonctionne sur une image, sur deux... mais pas trois...
Administrateur
Bonjour et bienvenue, Smiley smile
Youplaboum a écrit :
Tu as tout Smiley ohwell
Alors il manque un doctype, les éléments html, body, ... Smiley cligne

Youplaboum a écrit :
Est-ce possible que ça soit un bogue de Chrome ?
Un bogue dans Chrome, ça existe ?? (private joke pour Raphaël) Mmh tu peux tester dans Firefox ou Safari pour comparer.
Youplaboum a écrit :
Ça fonctionne sur une image, sur deux... mais pas trois...

C'est-à-dire quand tous les éléments ont cette valeur de vertical-align et que plus un seul n'a la valeur par défaut.
Bon avant ça, tu inclues un élément HTML de type bloc (div la division) dans un élément de type en ligne (span) : aucune assurance que le rendu soit bon et surtout c'est pas valide. Quand Raphaël demande la page en ligne c'est aussi pour s'assurer que le code est valide. Vouloir styler du code pas valide à la base, c'est une perte de temps pour tout le monde Smiley decu

Mis à part la validité, vertical-align fonctionne plutôt comme indiqué dans les liens depuis cette page : http://forum.alsacreations.com/topic.php?fid=4&tid=699
Sujet clos
Aller à