Un modo semplice per allineare verticalmente un div nidificato?

Sto provando ad allineare verticalmente alcune righe di testo all’interno di un div genitore. Di seguito è riportato un semplice esempio che dovrebbe spiegare esattamente ciò che voglio. Sembra così semplice, ma dopo ore di ricerche non riesco ancora a trovare il modo di farlo! Grazie per tutto l’aiuto che potete fornire.

JSFiddle

 
.outer { } .inner1 { float:left; width:80px; height:80px; background-image:url('http://www.google.com/favicon.ico'); background-size:cover; background-repeat: no-repeat; background-position: 50% 50%; } .inner2 { float:left; height:80px; padding-left:10px; vertical-align:middle; } .innerText { }
This text
Should be centered

Usa display:table-cell; invece di float:left; nella tua class inner2 .

 .inner2 { height:80px; padding-left:10px; vertical-align:middle; display:table-cell; } 

Lavoro jsFiddle qui.