"vertical-align: middle" ne s'aligne pas au milieu dans Firefox

J'essaie d'aligner du texte de différentes tailles verticalement, cependant, Firefox affiche le plus petit texte au-dessus du milieu."vertical-align: middle" ne s'aligne pas au milieu dans Firefox

CSS:

div.categoryLinks { 
    margin: 1em 16px; 
    padding: 0 4px; 
    border-width: 1px 0; 
    border-style: solid; 
    border-color: #ece754; 
    background: #f7f5b7; 
    color: #a49f1c; 
    text-align: center; 
    font-size: 1.4em; 
} 
div.categoryLinks em { 
    font-size: 0.6em; 
    font-style: normal; 
    vertical-align: middle; 
}

HTML:

<div class="categoryLinks"> 
    <em>SECTION:</em> 
    Page One &#183; 
    Page Two &#183; 
    <a href="link">Page Three</a> 
</div>

Screenshot: screenshot http://www.doheth.co.uk/files/valign.jpg

MISE À JOUR: pour être clair, je sais plus ou moins comment vertical-align œuvres , c'est-à-dire que je connais déjà les idées fausses communes. De plus de recherches, il semble que la manière la plus simple de résoudre ce problème est d'envelopper le texte plus grand dans un span et de définir vertical-align sur cela aussi. Les deux enfants de .categoryLinks s'alignent alors l'un par rapport à l'autre. À moins que quelqu'un puisse montrer un meilleur moyen sans balisage supplémentaire?

Source

2009-04-08 DisgruntledGoat

L'alignement vertical fonctionne uniquement comme prévu sur les cellules de tableau ou les éléments de bloc en ligne. Si vous voulez plus d'informations, je vous suggère de lire Understanding vertical-align, or "How (Not) To Vertically Center Content".

Editer: Vous avez quelque chose d'autre qui se passe parce que cela fonctionne pour moi comme sur Firefox. J'ai même laissé tomber la taille de la police de SECTION: juste en bas et c'est toujours centré. Avez-vous utilisé Firebug pour voir ce que les autres CSS affectent?

Cela fonctionne comme il est:

<html> 
<head> 
<style type="text/css"> 
div.categoryLinks { 
     margin: 1em 16px; 
     padding: 0 4px; 
     border-width: 1px 0; 
     border-style: solid; 
     border-color: #ece754; 
     background: #f7f5b7; 
     color: #a49f1c; 
     text-align: center; 
     font-size: 1.4em; 
} 
div.categoryLinks em { 
     font-size: 0.4em; 
     font-style: normal; 
     vertical-align: middle; 
} 
</style> 
</head> 
<body> 
<div class="categoryLinks"> 
     <em>SECTION:</em> 
     Page One &#183; 
     Page Two &#183; 
     <a href="link">Page Three</a> 
</div> 
</body>

Note: taille de la police de la section a changé à 0.4em de 0.6em originale pour souligner le point.

Source

2009-04-08 22:33:57 cletus

Juste pour ajouter à cela, vous pouvez essayer 'display: table-cell' mais je ne suis pas sûr de ce que le support du navigateur est pour cela. – inspite

Il parle de la propriété text-align: center CSS, pas de la propriété HTML valign. –

@ buti-oxa: Non, il n'est pas. Il parle de la propriété d'alignement vertical CSS – KOGI

Firefox est correctement rendu. La propriété vertical-align est inline, ce qui signifie qu'elle ne s'applique pas aux éléments de type < div> (et < p>, etc.). Essayez d'ajouter affichage: inline et voir si cela fonctionne.

Source

2009-04-08 22:32:22 sli

Ou, peut-être, inline-block. En fonction de l'implémentation (et du support multi-navigateurs), il pourrait offrir le meilleur des deux mondes. –

Il l'applique à SECTION: qui est déjà en ligne par défaut. –

Mettre le em dans le bloc inline ne fait pas de différence, il est encore plus élevé dans Firefox. – DisgruntledGoat

L'alignement vertical n'est censé s'appliquer qu'aux éléments en-ligne (je pense que les images sont les seules choses qui ont cette propriété par défaut), donc pour l'utiliser pour positionner un élément en ligne, le transformer en un bloc en ligne , vous pouvez utiliser la marge et le rembourrage pour le positionner similaire à la façon dont vous conseillerai un élément de bloc normal:

div.categoryLinks { 
     margin: 1em 16px; 
     padding: 0 4px; 
     border-width: 1px 0; 
     border-style: solid; 
     border-color: #ece754; 
     background: #f7f5b7; 
     color: #a49f1c; 
     text-align: center; 
     font-size: 1.4em; 

} 
div.categoryLinks em { 
      font-size: 0.6em; 

      display:inline-block; 
     vertical-align:top; 
     font-style: normal; 
     padding: 2px 0 0 0; 

}

vous devez tweak it a little for firefox 2 bien, mais c'est à cause d'un exemple de REMA de Firefox ne supportant pas les standards du Web. D'autre part, vous ne pouvez pas déranger avec le tweak car peu de gens utilisent encore ffx2, et c'est seulement un défaut de conception très mineur.

Source

2009-04-08 22:33:37 wheresrhys

Mettre le em dans le bloc en ligne ne fait pas de différence, c'est encore plus élevé dans Firefox. – DisgruntledGoat

mais le point est que, une fois que vous avez afficher: inline-block, vous pouvez aussi ajouter un padding-top à l'em pour le pousser vers le bas. – wheresrhys

J'ai eu le même problème. Cela fonctionne pour moi:

<style type="text/css"> 
    div.parent { 
     position: relative; 
    } 

    /*vertical middle and horizontal center align*/ 
    img.child { 
     bottom: 0; 
     left: 0; 
     margin: auto; 
     position: absolute; 
     right: 0; 
     top: 0; 
    } 
    </style> 

    <div class="parent"> 
     <img class="child"> 
    </div>

Source

2013-01-26 19:45:34 algreat

Je fixe cette suppression: les questions que

white-space: nowrap;

de div parent. Je ne sais pas pourquoi, mais cette règle ajouté, Firefox ne s'applique pas:

vertical-align: middle;

Source

2014-04-10 15:40:48 robertovg

"vertical-align: middle" ne s'aligne pas au milieu dans Firefox

Répondre

Questions connexes