immagine verticale-align in div

Question

Ho problema con immagine verticale-align in div

.img_thumb { 
    float: left; 
    height: 120px; 
    margin-bottom: 5px; 
    margin-left: 9px; 
    position: relative; 
    width: 147px; 
    background-color: rgba(0, 0, 0, 0.5); 
    border-radius: 3px; 
} 

.img_thumb img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    vertical-align: middle; 
} 

<div class="img_thumb"> 
    <a class="images_class" href="large.jpg" rel="images"><img src="small.jpg" title="img_title" alt="img_alt" /></a> 
</div> 

Per quanto so che ho bisogno "display: block;" posizionare l'immagine al centro e questo funziona. Anche nei tutorial trovo molte risposte ma non sono "utili", perché tutte le mie immagini NON sono alla stessa altezza!

Answer 1

Se si dispone di un'altezza fissa nel contenitore, è possibile impostare l'altezza della linea in modo che corrisponda all'altezza e si centrerà verticalmente. Quindi aggiungi solo testo allineato al centro in senso orizzontale.

Ecco un esempio: http://jsfiddle.net/Cthulhu/QHEnL/1/

EDIT

Il codice dovrebbe essere simile a questo:

.img_thumb { 
    float: left; 
    height: 120px; 
    margin-bottom: 5px; 
    margin-left: 9px; 
    position: relative; 
    width: 147px; 
    background-color: rgba(0, 0, 0, 0.5); 
    border-radius: 3px; 
    line-height:120px; 
    text-align:center; 
} 

.img_thumb img { 
    vertical-align: middle; 
} 

Le immagini saranno sempre centrati orizzontalmente e verticalmente, non importa quale sia la loro dimensione è . Qui è più 2 esempi con le immagini con dimensioni diverse:

http://jsfiddle.net/Cthulhu/QHEnL/6/

http://jsfiddle.net/Cthulhu/QHEnL/7/

UPDATE

Ora è 2016 (il futuro!) E si presenta come un paio di cose stanno cambiando (finalmente! !).

Indietro nel 2014, Microsoft announced che smetterà di supportare IE8 in tutte le versioni di Windows e incoraggerà tutti gli utenti ad aggiornare a IE11 o Edge. Bene, questo dovrebbe succedere martedì prossimo (12 gennaio).

Perché questo è importante? Con l'annuncio decesso di IE8, possiamo finalmente iniziare a utilizzare la magia CSS3.

Con questo detto, qui è un modo aggiornato di elementi allineamento, sia in orizzontale che in verticale:

.container { 
    position: relative; 
} 

.container .element { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
} 

Utilizzando questo metodo transform: translate();, non hanno nemmeno bisogno di avere un'altezza fissa nel vostro contenitore, è completamente dinamico. Il tuo elemento ha altezza o larghezza fissa? Anche il tuo contenitore? No? Non importa, sarà sempre centrato perché tutte le proprietà di centraggio sono fisse sul bambino, è indipendente dal genitore. Grazie CSS3.

Se è necessario centrare solo in una dimensione, è possibile utilizzare translateY o translateX. Provalo per un po 'e vedrai come funziona. Inoltre, prova a cambiare i valori dello translate, lo troverai utile per un sacco di situazioni diverse.

Qui, hanno un nuovo violino: https://jsfiddle.net/Cthulhu/1xjbhsr4/

Per ulteriori informazioni su transform, here's a good resource.

Felice codifica.

Answer 2

non è necessario definire il posizionamento quando si ha bisogno centro align verticale per gli elementi in linea e di blocco si può prendere di seguito indicate idea: -

inline-elements :- <img style="vertical-align:middle" ...> 
        <span style="display:inline-block; vertical-align:middle"> foo<br>bar </span> 

block-elements :- <td style="vertical-align:middle"> ... </td> 
        <div style="display:table-cell; vertical-align:middle"> ... </div> 

vedere la demo: - http://jsfiddle.net/Ewfkk/2/

Answer 3

vecchia questione, ma al giorno d'oggiCSS3 rende veramente allineamento verticale semplice!

Basta aggiungere al <div> questo css:

display:flex; 
align-items:center; 
justify-content:center; 

---

JSFiddle demo

diretta Esempio:

.img_thumb { 
 
    float: left; 
 
    height: 120px; 
 
    margin-bottom: 5px; 
 
    margin-left: 9px; 
 
    position: relative; 
 
    width: 147px; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    border-radius: 3px; 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
}

<div class="img_thumb"> 
 
    <a class="images_class" href="http://i.imgur.com/2FMLuSn.jpg" rel="images"> 
 
     <img src="http://i.imgur.com/2FMLuSn.jpg" title="img_title" alt="img_alt" /> 
 
    </a> 
 
</div>