在沒有高度的情況下在li標籤中垂直對齊圖像

我正在嘗試垂直對齊購物車圖像並將其更改爲懸停狀態。我檢查了其他答案，但他們似乎都涉及到改變身高。在沒有高度的情況下在li標籤中垂直對齊圖像

的jsfiddle http://jsfiddle.net/omarel/8agvv15s/

.navlogo, .navlogo_strip { 
z-index:99; 
} 
.navlogo img { 
width:120px; 
margin:10px 10px 10px 10px; 
} 
.navlogo_strip img { 
width:50px; 
margin:10px 10px 10px 10px; 
} 

.floatleft { 
float:none;  
} 
.floatright { 
float:none;  
} 

.nav_container ul li { 
display: inline-block; 
text-align: center; 
line-height:90px; 
} 

.nav_container ul li a { 
padding:50px 30px 50px 30px; 
margin:0px; 
cursor:pointer; 
} 

.nav_container ul { 
/* margin-top:15px; */ 
margin-left:30px; 
margin-top:0px; 
} 

.nav_container { 
text-align: center; 
width:100%; 
font-size:16px; 
letter-spacing: -1px; 
} 
.nav_container ul li:hover { 
/* not needed background-color:#08298A; */ 
} 

.nav_container ul li:hover a { 
color:#fff; 
background-color:#08298A; 
} 
header { 
width:100%; 
margin: auto; 
min-width:420px; 
/* 0 0 8px rgba(0,0,0,0.1)*/ 
}

HTML

 <div class="navlogo floatleft"> 
      <a href="http://localhost/auction/"><img src="logo.png" /></a> 
     </div> 


     <div class="desktopnav"> 
      <div class="floatleft"> 

      <div class="nav_container"> 
       <ul> 
        <li><a href="">Browse</a></li><li><a href="">Sell</a></li> 
       </ul> 
      </div> 

     </div> 

     <div class="floatright"> 

      <div class="nav_container"> 
       <ul> 
        <li><a href=""><img src="http://s10.postimg.org/s09rtjls5/cart.png?noCache=1430871415" /></a></li><!-- <li><a href="">Profile</a></li> --><li><a href="">Sign out</a></li> 
       </ul> 
      </div> 

      </div> 
     </div> 
     <div style="clear:both;"></div> 
    </header>

來源

2015-05-06 obreezy

有一個名爲'floatleft'將基本上模糊行內容和表示之間，即，它會打敗樣式表的目的在一定程度上類。將'.floatleft'類定義爲'{float：none;現在_that_讓我的眼睛模糊不清。 –