« Vertical-align: milieu » ne correspond pas au milieu dans Firefox

StackOverflow https://stackoverflow.com/questions/732139

  •  06-09-2019
  •  | 
  •  

Question

Je suis en train d'aligner un texte de différentes tailles verticalement, cependant, Firefox affiche le chemin de texte plus petit au-dessus du milieu.

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>

Capture d'écran: capture d'écran
(source: doheth.co.uk )

UPDATE :. Pour être clair, je sais plus ou moins comment fonctionne vertical-align, à savoir que je connais déjà les idées fausses communes

De plus l'enquête, il semble que la façon la plus simple de résoudre ce problème est d'envelopper le texte dans un plus grand span et mis sur vertical-align aussi. Les deux enfants de .categoryLinks puis arrangez par rapport à l'autre. A moins que quelqu'un puisse montrer une meilleure façon sans majoration supplémentaire?

Était-ce utile?

La solution

Alignement vertical ne fonctionne que comme prévu sur les cellules de la table ou des éléments inline-block. Si vous voulez plus d'informations, je vous suggère de lire Comprendre vertical-align, ou « Comment (pas) pour verticalement Content Center ".

Modifier Vous avez quelque chose d'autre se passe parce que fonctionne pour moi tout comme Firefox. J'ai même laissé tomber la taille de la police de section: droite vers le bas et il est toujours centré. Avez-vous utilisé Firebug pour voir ce que les autres CSS affecte-il?

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>

Remarque:. taille de la police a changé à 0.4em de 0.6em d'origine pour mettre l'accent sur le point

Autres conseils

Firefox est rendu correctement. La propriété verticale-align est en ligne, ce qui signifie qu'il ne vaut pas pour bloquer des éléments tels que

(et

, etc.). Essayez d'ajouter affichage:. En ligne et voir si cela fonctionne

alignement vertical est seulement censé appliquer à des éléments en ligne-bloc (je pense que les images sont les seules choses qui ont cette propriété de mise en page par défaut), afin de l'utiliser pour positionner un élément en ligne, tout d'abord la transformer en un bloc en ligne, alors 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 ruser un peu pour firefox 2 bien, mais cela est dû au fait d'un exemple REMA de Firefox ne supportant pas les standards du Web. D'autre part, vous ne pouviez pas la peine avec le tweak que peu de gens utilisent encore ffx2, et il est seulement un défaut de conception très mineur.

Je fixe ces questions simplement la suppression: 

 white-space: nowrap;

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

vertical-align: middle;

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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top