“vertical-align: middle” ne correspond pas à la moyenne dans Firefox

Je suis en train d'aligner du texte de différentes tailles à la verticale, cependant, Firefox affiche le texte plus petit de manière au-dessus de la moyenne.

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:
“vertical-align: middle” ne correspond pas à la moyenne dans Firefox

(source: doheth.co.royaume-uni)

Mise à JOUR: juste pour être clair, j'en suis conscient, plus ou moins comment vertical-align œuvres, c'est à dire que je connais déjà les idées fausses les plus courantes.

De plus d'une enquête, il semble que la façon la plus simple de résoudre ce problème consiste à envelopper le texte plus grand dans un span et définir vertical-align sur que trop. Les deux enfants de .categoryLinks puis aligner les uns par rapport aux autres. Sauf si quelqu'un peut montrer une meilleure façon de le faire sans balisage?

InformationsquelleAutor DisgruntledGoat | 2009-04-08
  1. 15

    Vertical align ne fonctionne comme prévu sur les cellules d'un tableau ou inline-block éléments. Si vous voulez plus d'informations je vous conseille de lire La compréhension vertical-align, ou "Comment (ne Pas) à la Verticale du Centre de Contenu".

    Edit: Vous avez autre chose parce que cela fonctionne pour moi sur Firefox. J'ai même abandonné la taille de la police de la SECTION: droit vers le bas et c'est toujours centré. Avez-vous utilisé Firebug pour voir ce que les autres CSS est l'affectent?

    Cela fonctionne 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: section de la taille de la police changé à 0,4 em à partir de l'original 0.6 em à souligner.

    • Juste pour ajouter à cela, vous pouvez essayer display:table-cell mais je ne suis pas sûr de ce que la prise en charge du navigateur est pour.
    • Il parle text-align: center propriété CSS, pas sur valign HTML propriété.
    • Non, il n'est pas. Il parle de CSS vertical-align propriété
    • vertical-align travaille également sur des éléments avec display:inline:block. Donc, la première déclaration "Vertical align ne fonctionne comme prévu sur les cellules d'un tableau." est faux.
    • Merci pour le lien. Il se promène à travers l'alignement vertical assez bien.
    • Édité le post pour dire autant
    • yooooooooooooooooooo
    • Il y a aussi le flexbox solution maintenant, voir cette réponse sur une question similaire: stackoverflow.com/a/31078418/327074

    InformationsquelleAutor cletus
  2. 2

    Firefox est rendu correctement. Le vertical-align propriété est sur la ligne, ce qui signifie qu'il ne s'applique pas aux éléments de bloc comme <div> (et <p>, etc). Essayez d'ajouter display: inline et voir si cela fonctionne.

    • Ou, éventuellement, inline-block. En fonction de la mise en œuvre (et de la croix-prise en charge du navigateur) qu'il pourrait offrir le meilleur des deux mondes.
    • Il s'applique à <em>TITRE:</em> qui est déjà inline par défaut.
    • Réglage de l'em inline block ne pas faire une différence, c'est encore plus élevée dans Firefox.
    • Oups, tu as raison, buti-oxa. J'ai besoin d'apprendre à lire plus attentivement.
    InformationsquelleAutor sli
  3. 2

    Vertical align est supposé s'appliquer à inline-block éléments ( je pense que les images sont les seules choses qui ont cette propriété de présentation par défaut), afin de l'utiliser pour positionner un élément inline, tout d'abord la transformer en une ligne de bloc, vous pouvez utiliser la marge et le remplissage de position similaire à la façon dont vous woudl un bloc normal élément:

    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 avez à ruser un peu pour firefox 2 bien, mais c'est parce que d'une raer exemple de firefox ne supportant pas les standards du web. D'autre part, il ne pouvait pas s'embêter avec le tweak que peu de personnes utilisent encore ffx2, et c'est seulement une très mineur défaut de conception.

    • Réglage de l'em inline block ne pas faire une différence, c'est encore plus élevée dans Firefox.
    • mais le point est que une fois que vous avez display:inline-block vous pouvez ensuite ajouter un peu de padding-top pour l'em trop le pousser vers le bas.
    InformationsquelleAutor wheresrhys
  4. 1

    Je fixe cette questions, juste en supprimant:

     white-space: nowrap;

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

    vertical-align: middle;
    InformationsquelleAutor robertovg
  5. 0

    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>
    InformationsquelleAutor algreat