Vertical Align images inside li Chrome Numero

Question

Desidero allineare verticalmente le immagini all'interno di li, Il mio codice funziona bene in firefox ma non in chrome. Qualunque corpo può aiutarmi con questo?

Ecco il codice HTML:

<div class="brands container content"> 
    <ul id="brandlogo"> 
     <li><a href="http://scrub-market.hostedbywebstore.com/Alegria/b/11442638011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/12MlwaGE42L.png" alt=""/></a></li> 
      <li><a href="http://scrub-market.hostedbywebstore.com/Cherooke/b/11442639011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/12rC5bPL82L.png" alt=""/></a></li> 
      <li><a href="http://scrub-market.hostedbywebstore.com/Dickies/b/11442640011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/220GuD5uB5L.png" alt=""/></a></li> 
      <li><a href="http://scrub-market.hostedbywebstore.com/Healing-Hands-Purple-Label/b/11442641011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/12qBKSlxODL.png" alt=""/></a></li> 
      <li><a href="http://scrub-market.hostedbywebstore.com/Heart-Soul/b/11442643011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/127dR7ho7TL.png" alt=""/></a></li> 
      <li><a href="http://scrub-market.hostedbywebstore.com/Koi/b/11442644011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/22gR5V1VEFL.png" alt=""/></a></li> 
      <li><a href="http://scrub-market.hostedbywebstore.com/New-Balance/b/11442645011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/22Sr0En0GzL.png" alt=""/></a></li> 
      <li><a href="http://scrub-market.hostedbywebstore.com/Nurse-Mate/b/11442646011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/12JRdD3GOjL.png" alt=""/></a></li> 
      <li><a href="http://scrub-market.hostedbywebstore.com/Renova/b/11442647011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/22bm9-FDvpL.png" alt=""/></a></li> 
      <li><a href="http://scrub-market.hostedbywebstore.com/Skechers/b/11442648011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/12mGjpXipJL.png" alt=""/></a></li> 
      <li><a href="http://scrub-market.hostedbywebstore.com/Wonderwink/b/11442649011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/22D0pbgaokL.png" alt=""/></a></li> 
     </ul> 
</div> 

e CSS:

#brandlogo { 
    text-align: center; 
    padding: 0px; 
    margin: 30px 0px 0px; 
    position: relative; 
    list-style: outside none none; 
} 

#brandlogo li { 
    border: 1px solid #DDD; 
    float: none; 
    display: inline-block; 
    padding: 0px 35px; 
    width: auto; 
    margin: 10px 10px 10px 0px; 
    height: 150px; 
    line-height: 150px; 
    border-radius: 5px; 
} 
#brandlogo li a { 
    float: none; 
    width: 100%; 
} 
#brandlogo li a img { 
    vertical-align: middle; 
} 

http://jsbin.com/wizati/1/edit?html,css,output Grazie in anticipo.

Answer 1

CSS

#brandlogo li a { 
    float: none; 
    width: 100%; 
    height: inherit; 
    display: table-cell; 
    vertical-align: middle; 
} 

mio utilizzando la proprietà CSS di cui sopra solo fare il tag a di agire come una cella di tabella e occupare pieno height della sua madre e vertical-align:middle suo childern

JS BIN DEMO

Answer 2

Aggiungi un float: left; come mostrato:

#brandlogo li { 
    border: 1px solid #DDD; 
    float: left; 
    display: inline-block; 
    padding: 0px 35px; 
    width: auto; 
    margin: 10px 10px 10px 0px; 
    height: 150px; 
    line-height: 150px; 
    border-radius: 5px; 

Answer 3

Aggiungi vertical-align: middle;-li elemento:

#brandlogo { 
 
    text-align: center; 
 
    padding: 0px; 
 
    margin: 30px 0px 0px; 
 
    position: relative; 
 
    list-style: outside none none; 
 
} 
 
#brandlogo li { 
 
    border: 1px solid #DDD; 
 
    float: none; 
 
    display: inline-block; 
 
    padding: 0px 35px; 
 
    width: auto; 
 
    margin: 10px 10px 10px 0px; 
 
    height: 150px; 
 
    line-height: 150px; 
 
    border-radius: 5px; 
 
    vertical-align: middle;/*Add vertical align middle*/ 
 
} 
 
#brandlogo li a { 
 
    float: none; 
 
    width: 100%; 
 
} 
 
#brandlogo li a img { 
 
    vertical-align: middle; 
 
}

<div class="brands container content"> 
 
    <ul id="brandlogo"> 
 
    <li> 
 
     <a href="http://scrub-market.hostedbywebstore.com/Alegria/b/11442638011" class=""> 
 
     <img src="https://images-na.ssl-images-amazon.com/images/I/12MlwaGE42L.png" alt="" /> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="http://scrub-market.hostedbywebstore.com/Cherooke/b/11442639011" class=""> 
 
     <img src="https://images-na.ssl-images-amazon.com/images/I/12rC5bPL82L.png" alt="" /> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="http://scrub-market.hostedbywebstore.com/Dickies/b/11442640011" class=""> 
 
     <img src="https://images-na.ssl-images-amazon.com/images/I/220GuD5uB5L.png" alt="" /> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="http://scrub-market.hostedbywebstore.com/Healing-Hands-Purple-Label/b/11442641011" class=""> 
 
     <img src="https://images-na.ssl-images-amazon.com/images/I/12qBKSlxODL.png" alt="" /> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="http://scrub-market.hostedbywebstore.com/Heart-Soul/b/11442643011" class=""> 
 
     <img src="https://images-na.ssl-images-amazon.com/images/I/127dR7ho7TL.png" alt="" /> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="http://scrub-market.hostedbywebstore.com/Koi/b/11442644011" class=""> 
 
     <img src="https://images-na.ssl-images-amazon.com/images/I/22gR5V1VEFL.png" alt="" /> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="http://scrub-market.hostedbywebstore.com/New-Balance/b/11442645011" class=""> 
 
     <img src="https://images-na.ssl-images-amazon.com/images/I/22Sr0En0GzL.png" alt="" /> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="http://scrub-market.hostedbywebstore.com/Nurse-Mate/b/11442646011" class=""> 
 
     <img src="https://images-na.ssl-images-amazon.com/images/I/12JRdD3GOjL.png" alt="" /> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="http://scrub-market.hostedbywebstore.com/Renova/b/11442647011" class=""> 
 
     <img src="https://images-na.ssl-images-amazon.com/images/I/22bm9-FDvpL.png" alt="" /> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="http://scrub-market.hostedbywebstore.com/Skechers/b/11442648011" class=""> 
 
     <img src="https://images-na.ssl-images-amazon.com/images/I/12mGjpXipJL.png" alt="" /> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="http://scrub-market.hostedbywebstore.com/Wonderwink/b/11442649011" class=""> 
 
     <img src="https://images-na.ssl-images-amazon.com/images/I/22D0pbgaokL.png" alt="" /> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</div>