web-dev-qa-db-fra.com

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

J'essaie d'aligner verticalement du texte de différentes tailles, cependant, Firefox affiche le 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: screenshot
(source: doheth.co.uk )

[~ # ~] mise à jour [~ # ~] : juste pour être clair, je sais plus ou moins comment vertical-align fonctionne, c'est-à-dire que je connais déjà les idées fausses courantes.

D'après des recherches plus approfondies, il semble que le moyen le plus simple de résoudre ce problème consiste à envelopper le texte plus grand dans un span et à définir vertical-align là-dessus aussi. Les deux enfants de .categoryLinks puis aligner les uns par rapport aux autres. À moins que quelqu'un puisse montrer une meilleure façon sans balisage supplémentaire?

cssvertical-alignment
25
DisgruntledGoat

L'alignement vertical ne fonctionne que comme prévu sur les cellules du tableau ou display: inline-block elements. Si vous voulez plus d'informations, je vous suggère de lire Comprendre l'alignement vertical, ou "Comment (pas) centrer verticalement le contenu" .

Edit: 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: tout en bas et elle est toujours centrée. Avez-vous utilisé Firebug pour voir quels autres CSS l'affectent?

Cela fonctionne tel quel:

<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: la taille de la police de section est passée de 0,4 em à 0,6 em pour souligner le point.

16
cletus

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

2
user13876

L'alignement vertical est censé s'appliquer uniquement aux éléments de bloc en ligne (je pense que les images sont les seules choses qui ont cette propriété de disposition par défaut), donc pour l'utiliser pour positionner un élément en ligne, d'abord le transformer en un bloc en ligne, puis vous pouvez utilisez la marge et le rembourrage pour le positionner de la même manière que pour 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 cependant, mais c'est à cause d'un exemple raer de firefox ne supportant pas les standards du web. D'un autre côté, vous ne pouviez pas vous soucier du Tweak car peu de gens utilisent encore ffx2, et ce n'est qu'un défaut de conception très mineur.

2
wheresrhys

J'ai résolu ce problème en supprimant simplement:

 white-space: nowrap;

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

vertical-align: middle;
1
robertovg

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