“Vertical-align: middle” non allinearsi al centro in Firefox

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

  •  06-09-2019
  •  | 
  •  

Domanda

Sto cercando di allineare un testo di dimensioni diverse in verticale, invece, Firefox visualizza il modo in cui il testo più piccolo al di sopra della media.

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>

Cattura schermo: screenshot
(fonte: doheth.co.uk )

Aggiorna :. Tanto per intenderci, sono consapevole più o meno come funziona vertical-align, vale a dire che già conoscono le idee sbagliate comuni

Da ulteriori indagini, sembra che il modo più semplice per risolvere questo problema è quello di avvolgere il testo più grande in una span e impostare vertical-align anche su questo. I due figli di .categoryLinks quindi allineare l'uno rispetto all'altro. A meno che qualcuno può mostrare un modo migliore, senza markup extra?

È stato utile?

Soluzione

verticale allineare funziona solo come previsto su celle di tabella o elementi inline-block. Se volete maggiori informazioni vi consiglio di leggere Capire vertical-align, o "Come (non) per verticalmente Centro contenuti ".

Modifica Hai qualcos'altro perché che funziona per me, come è su Firefox. Ho anche lasciato cadere la dimensione del carattere della sezione: destra verso il basso ed è ancora centrato. Hai usato Firebug per vedere quali altri CSS sta interessando vero?

Questo funziona come è: 

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

Nota. dimensione del vano carattere cambiato 0.4em 0.6em da originale per sottolineare il punto

Altri suggerimenti

Firefox è il rendering in modo corretto. La proprietà vertical-align è in linea, il che significa che non si applica a bloccare elementi come

(e

, ecc). Prova ad aggiungere Display:. Inline e vedere se funziona

allineamento verticale è solo dovrebbe applicarsi a inline-block elementi (credo che le immagini sono le uniche cose che hanno questa proprietà di layout di default), in modo da utilizzarlo per posizionare un elemento inline, prima di trasformarlo in un blocco in linea, quindi è possibile utilizzare margin e padding per posizionarla simile a come si merion un elemento di blocco normale: 

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;

}

Devi modificarlo un po 'per firefox 2 però, ma questo è causa di un esempio di raer firefox non supportare gli standard web. D'altra parte non si poteva perdere tempo con il tweak come poche persone usano ancora ffx2, ed è solo un difetto di progettazione molto minore.

ho risolto questi problemi solo la rimozione: 

 white-space: nowrap;

da div genitore. Non so perché, ma con questa regola aggiunta, Firefox non si applica il: 

vertical-align: middle;

Ho avuto lo stesso problema. Questo funziona per me: 

 <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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top