CSS - proprietà height linea, come funziona (semplice)

Question

Quindi, in this simple example ho come risultato finale:

Questa è una domanda molto semplice, ma io semplicemente non può ottenere la mia testa intorno ad esso .

Per ottenere la centratura verticale dei numeri che ho usato:

line-height:100px; 

Quali grandi opere e sono state facendo tentativi ed errori base.

La mia domanda riguarda specificamente il motivo per cui lo line-height:50px; si ottiene solo a metà strada.

Se il smalldiv ha un'altezza di 100px e io un posizionamento relativo ad esso, non dovrebbe la metà di centrarlo a metà.

Questo mi lascia perplesso specialmente dal momento che, when I center a div:

userei: margin:50px 0 0 50px; per ottenere questo:

---

Mi rendo conto che questa domanda potrebbe essere un eccessivo in quanto la risposta potrebbe essere (probabilmente sarà molto semplice), mi dispiace! ma suppongo sia meglio la domanda "perché non funziona";)

Grazie in anticipo !!

Answer 1

La semplice risposta è che con l'altezza della linea il carattere si troverà nel centro verticale della linea, quindi una riga con un'altezza di 100 px ha il testo nel mezzo, quindi 50 px.

Answer 2

Questo non funziona perché l'altezza della linea è specifica del testo e non all'altezza reale di elementi come div. Suggerirei di usare l'altezza e non l'altezza della linea quando il soggetto non è in realtà testo.

Answer 3

Quando si assegna a un elemento un'altezza di riga del 100% (nell'esempio, questo equivale a 100 px), il testo viene posizionato al centro verticalmente di una linea alta 100 px.

Answer 4

Penso che line-height sia proprio come sembra. Sarebbe diverso se fosse solo metà dell'altezza, dato che dovresti tenere conto dello font-size, ecc. line-height crea una cosa a blocchi con un'altezza di 100px, nel tuo caso e centra il testo all'interno di esso.

Fondamentalmente, line-height aggiunge il valore ((desired height) - (font-size))/2 all'inizio e alla fine del testo, mentre l'aggiunta di margini non tiene conto di ciò.

Answer 5

L'utilizzo della proprietà altezza riga su 100px significa che il testo sarà centrato verticalmente nel mezzo di una linea con un'altezza di 100 px. Significa che sarà posizionato intorno a 50px. Impostando i margini su 50px otterrai un risultato simile ma potresti notare che non è esattamente centrato.

Answer 6

In sostanza, l'altezza della linea aiuta a impostare il "leader" e il "mezzo leader". I conti 100px per l'altezza totale dell'elemento e il testo viene "allineato verticalmente" all'interno di quell'area. La metà sta andando sopra e metà sotto.

Questo spiega meglio di me http://www.w3.org/TR/CSS2/visudet.html#line-height

Answer 7

Ok Sono abbastanza sicuro ho capito ora, risponderò alla mia domanda, grazie a tutto ciò che risponde a questa sarebbe una spiegazione più grafica (che sempre mi aiuta):

Questo è solo un complemento jarret's answer (il primo a inchiodarlo IMHO)

Grazie per tutto il hel pful risponde

BTW: Ci scusiamo per l'orrida opera d'arte.

Answer 8

stato già risposto, ma ho pensato che avrei potuto aggiungere che la formula è di solito è:

La differenza tra line-height e font-size è chiamato leader. Quindi dividi questo Interlinea per 2 per ottenere il semitono, che viene messo sopra e sotto il tuo testo causandone la centratura verticale.

Il seguente numero set of slides spiegherà molto sull'altezza della linea. Puoi iniziare alla diapositiva 72 per quello che ho spiegato sopra, ma ti consiglio di passare attraverso l'intero set.