Come allineare verticalmente 2 diverse dimensioni di testo?

91

So che per allineare verticalmente il testo al centro di un blocco, imposti l'altezza della linea alla stessa altezza del blocco.

Tuttavia, se ho una frase con una parola nel mezzo, quella è 2em. Se l'intera frase ha un'altezza di riga uguale al blocco contenitore, il testo più grande è allineato verticalmente ma il testo più piccolo si trova sulla stessa linea di base del testo più grande.

Come posso impostarlo in modo che entrambe le dimensioni del testo siano allineate verticalmente, quindi il testo più grande sarà su una linea di base inferiore al testo più piccolo?

— JD Isaacks
fonte

148

Prova i vertical-align:middle;contenitori in linea?

EDIT: funziona ma tutto il tuo testo deve essere in un contenitore inline, come questo:

    <div style="height:100px; line-height:100px; background:#EEE;">
        <span style="vertical-align:middle;">test</span>
        <span style="font-size:2em; vertical-align:middle;">test</span>
    </div>

Espandi lo snippet

— MatTheCat
fonte

5

E ho sempre pensato che vertical-align: middlefosse solo per l table-cell'!

— Robin van Baalen

1

Questo sembra fallire se voglio che il secondo span sia flottato correttamente. Quindi è allineato in alto: jsfiddle Qualche idea su come farlo funzionare con float?

— philk

2

È necessario impostare gli stili di altezza e altezza della riga del div genitore?

— lexeek

6

La funzionalità visualizzata è corretta perché l'impostazione predefinita per "vertical-align" è la linea di base. Sembra che tu voglia vertical-align:top. Ci sono altre opzioni. Vedi qui a W3Schools .

Modifica W3Schools non ha ripulito il loro atto e sembra ancora essere una scadente (nella migliore delle ipotesi) fonte di informazioni. Ora uso sitepoint . Scorri fino alla fine della prima pagina di sitepoint per accedere alle sezioni di riferimento.

— DwB
fonte

11

Da allora ho imparato che W3Schools non è un buon sito di riferimento. Vedi w3fools.com per maggiori informazioni.

— DwB

2

+1 Dai un voto positivo per essere giunto alla conclusione che W3S è un pezzo di spazzatura.

— aefxx

4

i due set di testo devono avere la stessa altezza di riga fissa e il set di allineamento verticale

 span{
     vertical-align: bottom;
     line-height: 50px;
}

— Matoeil
fonte

1

Tecnicamente non puoi, tuttavia, se hai dimensioni di testo fisse puoi usare il posizionamento (relativo) per spostare il testo più grande verso il basso e impostare l'altezza della riga sul testo più piccolo (presumo che questo testo più grande sia contrassegnato come tale quindi puoi usarlo come selettore CSS)

— Alex
fonte

1

Puoi utilizzare le dimensioni percentuali per riapplicare quelle del genitore line-height

.big {
  font-size: 200%;
  line-height: 25%;
  display: inline-block;
  vertical-align: middle;
}

Utque aegrum corpus <span class="big">etiam</span> levibus solet offensis

Espandi lo snippet

— Creaforge
fonte

1

Modo semplice: usa flex:

<div>
        abcde
        &nbsp;&nbsp;
        <span>efghai</span>
</div>

<style>
    div {
        padding: 20px;
        background-color: orange;
        display: flex;
        align-items: center; }

    span {
        font-size: 1.5em; }
</style>

— Tomas Macek
fonte

0

Un'opzione è quella di utilizzare una tabella in cui i testi di dimensioni diverse si trovano nelle loro celle e utilizzare align: middle su ogni cella.

Non è carino e non funziona per tutte le occasioni, ma è semplice e funziona con qualsiasi dimensione di testo.

— David Mårtensson
fonte

9

Preferirei accettare la sconfitta prima di utilizzare di nuovo una tabella per il layout.

— JD Isaacks,

0

Funziona

header > span {
    margin: 0px 12px 0px 12px;
    vertical-align:middle;
}
.responsive-title{
    font-size: 12vmin;
    line-height: 1em;
}
.responsive-subtitle{
    font-size: 6vmin;
    line-height: 2em;
}

<header>
  <span class="responsive-title">Foo</span>
  <span class="responsive-subtitle">Bar</span>
</header>

Espandi lo snippet

— Ronnie Royston
fonte