problème d'alignement vertical de l'image

J'ai une image que je veux aligner verticalement avec du texte. L'image n'a pas de bordure, pas d'espacement et a été recadrée correctement. Cependant, il s'aligne différemment dans IE et Firefox, et je ne peux pas comprendre pourquoi.problème d'alignement vertical de l'image

alignement dans IE:

alt text

alignement dans FF:

alt text

Remarquez comment dans FF, la boîte X affleure le fond du texte. Le code HTML J'utilise est:

<div id="Header"> 
    <a href="#" onclick="return false;">Close</a> 
    <a href="#" onclick="return false;"><img src="App_Themes/Dark/images/close-button.gif" alt="Close" style="border-width:0px;" /></a> 
</div>

Et la partie pertinente de la feuille de style ressemble à:

#Header img 
{ 
    vertical-align: middle; 
    display: inline-block; 
}

J'ai manipulé dans le passé en faisant l'élément d'image un élément de bloc, mais ne fonctionne que lorsque l'image est le seul élément du conteneur. Comment puis-je réparer cela?

Source

2009-11-30 Chris

L'image peut-elle être une image d'arrière-plan sur la div en-tête? Si oui, vous pouvez alors avoir une position de fond: centre du centre; – Zoidberg

Je viens de perdre 3 heures de ma vie avec un problème. Merci. – Marcelo

pensées au hasard:

Pourquoi inline-block, ne devrait pas ce travail en ligne?
Pourrait-il y avoir une marge ou un remplissage sur le x? Pouvez-vous vérifier avec Firebug?
Est-ce que le "milieu" n'est pas le bon moyen de l'aligner? En supposant que vous voulez les aligner le long de la ligne de base, ne devrait-il pas être «baseline»?
Et si vous fusionniez les deux balises <a> en une?

Source

2009-11-30 19:26:10

Inline-block était une tentative de correction qui n'avait aucun effet. Firebug ne signale aucune marge/marge. Je le veux vraiment aligné au milieu. J'ai indiqué la ligne de base comme une illustration de la différence. Rien n'est arrivé quand je fusionne les deux en une seule étiquette. – Chris

C'est bizarre. Pouvez-vous essayer ce qui se passe si vous utilisez "align = 'absmiddle'" démodé "juste pour voir si cela apporte un changement? –

Essayez

#Header { 
    vertical-align: middle; 
}

Remarque J'ai testé ce mode de normes strictes. Il a semblé n'avoir aucun effet sur IE6 mais a déplacé l'image sur IE8 et FF3.

Source

2009-11-30 20:31:37

Vous ne devriez pas avoir besoin du bloc inline, c'est la valeur d'affichage par défaut pour une image, sauf si vous l'avez réinitialisé plus haut dans la cascade, c'est pourquoi il semble n'avoir aucun effet.

Depuis que je ne peux pas voir une page de démonstration à Firebug, je vais deviner votre taille de police et donc line-height est différent. Essayez de spécifier une hauteur de ligne pour les éléments du conteneur ou les balises a. Si les hauteurs de lignes diffèrent dans les navigateurs (ce qui est très bien le cas), alors le "moyen" et le haut vous alignant seront différents tandis que "baseline" devrait en théorie produire les mêmes résultats cross browser/font-size/line- la taille.

Source

2009-11-30 21:53:01 prodigitalson

problème d'alignement vertical de l'image

Répondre

Questions connexes