Allinea l’immagine nell’elenco non ordinato con gli elementi dell’elenco

Ho un menu composto da un elenco non ordinato con più voci di elenco in cui contengono testo tranne l’ultimo, che contiene un’immagine. il problema è che voglio allineare il centro dell’immagine con il centro del testo nelle altre voci dell’elenco ma non riesco a capire come farlo. Ho provato cose diverse con il margine, il padding e l’altezza ma non riesco a capirlo

Ecco una demo di JSFiddle

HTML

 

CSS

 .menu-main-container ul { text-align : left; display : inline; list-style : none; text-transform : capitalize; text-decoration : none; padding : 0; margin : 0; } .menu-main-container ul li a { text-transform : capitalize; text-decoration : none; color : #000000; font-weight : bold; } .menu-main-container ul li { display : inline; position : relative; cursor : pointer; padding : 25px; } .menu-main-container ul li:hover { background-color : #003cb3; } .menu-main-container ul li:hover > a { color : #fff; } li#menu-item-4:hover { background-color: white; } li#menu-item-4 { } li#menu-item-4 a { } li#menu-item-4 a img { } 

Per vertical-align: middle funziona, devi specificare un’altezza di riga:

 li#menu-item-4 a { line-height: 30px; } li#menu-item-4 a img { vertical-align: middle; } 

Vedi questo aggiornamento fiddle .

FIDDLE DI LAVORO

usa vertical-align: middle;

Nota: puoi utilizzare solo l’allineamento verticale su elementi che si comportano come un tavolo. Per questo è necessario modificare la display: table su genitore e display: table-cell sul contenuto + vertical-align: middle; .

Usa vertical-align: middle dell’immagine. Guarda una forchetta del tuo violino http://jsfiddle.net/58roatpd/1/

Prova questo:

 li#menu-item-4 a img { position: absolute; transform: translateY(-50%); top: 50%; } .menu-main-container ul li { position: relative; display: table-cell; /* other styles */ } 

Fiddle che lavora