Perché, quando ho centrare un'immagine in un div con line-height, non un vuoto 3px apparire in alto?

Question

Dai un'occhiata alla questa pagina . Le immagini sulla destra devono essere centrate nei loro div. Ma se si guarda da vicino, c'è un piccolo bordo di circa 3 pixel nella parte superiore. E se si disattiva il overflow: hidden (attraverso Firebug o equivalente IE8), si attacca fuori la parte inferiore.

Il codice HTML è questa:

<div class="small">
    <img src="/images/photos/Bedroom.jpg" alt="Bedroom" />
</div>
<div class="small">
    <img src="/images/photos/View.jpg" alt="View" />
</div>

E il CSS, in questo modo:

div.small
{
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    overflow:hidden;
    margin:5px;
    background-color: #C0C0C0;
    float:left;
}
div.small img
{
    vertical-align: middle;
    max-width:100px;
    max-height:100px;
    display: inline;
}

Qual è la causa questa misteriosa divario? Ho controllato i margini e padding, e non sembrano essere il problema.

Answer 1

NB: Non sono del tutto sicuro che questa spiegazione è corretta, ma sembra ragionevole per me

.

Per prima cosa, vediamo cosa la specifica ha da dire su leader e semi-interlinea :

  

Poiché il valore di 'line-height' può essere diversa dalla altezza dell'area di contenuto possono esserci spazio sopra e sotto glifi resi. La differenza tra l'altezza del contenuto e il valore usato di 'line-height' è chiamato il principale. Metà del primo piano è chiamato il semi-interlinea.

     

Gli interpreti centro glifi verticalmente in un riquadrato in riga, l'aggiunta di semi-interlinea sulla parte superiore e inferiore. Ad esempio, se un pezzo di testo è '12px' alto e il valore di 'line-height' è '14px', dovrebbero essere aggiunti 2pxs di spazio in più: 1px 1px sopra e sotto le lettere. (Questo vale per casse vuote e, come se la casella vuota conteneva una lettera infinitamente stretto.)

Fin qui, tutto bene. Quindi, tutte le finestre di riga all'interno di un div.small che hanno un'altezza inferiore div.small del line-height saranno centrati verticalmente con la div.small. Ora diamo un'occhiata a la proprietà vertical-align , in particolare il middle valore:

  

Allineate il punto medio verticale della scatola con la linea di base del box genitore più metà altezza x del genitore.

Si noti che questo non è necessariamente il centro area line! L'esatta posizione cambierà con la vostra scelta di tipo di font e la dimensione. È possibile verificare questo con lo zoom del testo più grande e più piccolo:. La dimensione dei cambiamenti gap

Come hai trovato, impostando font-size: 0 elimina il divario del tutto. Come il carattere ora non ha altezza, la casella linea ottiene un leader e mezza leader di 50px, con la linea di base centrata verticalmente. Per rendere l'immagine vertical-align: middle, il browser impone suo punto medio in quel basale, più l'altezza x del carattere, che ora è pari a zero. Questo dà un'immagine verticalmente centrato.

Answer 2

Si scopre che, impostando font-size:0; sul div risolve il problema. Tuttavia, ancora non spiega il divario. Qualcuno sa che cosa fa sì che il divario?

Answer 3

Non posso spiegare tutto ciò che sta accadendo, ma dopo aver affrontato lo stesso problema, sembra che avesse qualcosa a che fare con il modo in cui dichiarava proprietà font in css, per es.

font: 11px / 1.35em Verdana, Arial, Helvetica, sans-serif;

= male per le tabelle apparentemente. - Ho rimosso tale dichiarazione e invece usato font-size: 11px, line-height: px, font-family, ecc, ed è fissato il divario

!