Vertical-align middle con display table-cell non funziona sulle immagini

Question

Sto provando a usare l'allineamento verticale: medio su un layout per centrare verticalmente a volte testo, a volte immagini, ma funziona solo su testo. Qualcuno può dirmi perché?

HTML:

<div> 
    <img src="http://jsfiddle.net/img/logo.png"/> 
</div> 

<div> 
    <span> text </span> 
</div> 

CSS:

div{ 
    width:200px; 
    height:200px; 
    background-color:red; 
    display:table; 

    margin:10px; 
} 
img, span{ 
    display:table-cell; 
    vertical-align:middle; 
} 

http://jsfiddle.net/9uD8M/ ho creato un violino aswell

Answer 1

Inserire border: 1px solid black sui tag img, span, quindi controllare entrambi gli elementi nel browser dev. console. Noterai che lo span ha come valore predefinito il 100% dell'altezza del suo genitore, mentre l'immagine ha un'altezza definita (l'altezza dell'immagine reale).

Quindi non sei davvero in verticale allineare gli elementi relativi al div, sei solo in senso verticale l'allineamento del testo all'interno dell'elemento arco rispetto al lasso :)

Se davvero si vuole utilizzare le tabelle per verticale -centering, ecco il codice corretto: http://jsfiddle.net/WXLsY/

(vertical-align e display:table-cell andare sul genitore, ed hai bisogno di tavolo involucro su di loro)

ma ci sono altri modi per fare questo (ha così tante risposte a questa domanda, basta usare scottare ch)

Answer 2

Qui è un modo di risolvere il problema:

HTML:

<div> 
    <span><img src="http://jsfiddle.net/img/logo.png" /></span> 
</div> 
<div> 
    <span> text </span> 
</div> 

Inserisci il tuo img in un span, l'immagine è un elemento sostituito, non può contenere contenuti per bambini, quindi, l'allineamento verticale non funzionerà.

CSS:

div { 
    width:200px; 
    height:200px; 
    background-color:red; 
    display:table; 
    margin:10px; 
} 
span { 
    display:table-cell; 
    vertical-align:middle; 
} 

See demo: http://jsfiddle.net/audetwebdesign/Fz6Nj/

Ci sono diversi modi di fare questo, si potrebbe applicare anche display: table-cell all'elemento genitore div, ma che sarebbe un approccio diverso.

Answer 3

Puoi provare aggiungendo -> altezza riga: 200px; nella sezione di stile span, penso che potrebbe funzionare;

Answer 4

Per allineare verticalmente un'immagine all'interno di una cella di tabella è necessario fornire all'immagine una visualizzazione di blocco.

display: block 
margin: 0 auto 

margine: 0 auto è allineare l'immagine al centro. Se vuoi che l'immagine rimanga allineata, non includerla. Se si desidera che l'immagine a destra allineati è possibile aggiungere:

float: right 

Grazie, G