Pionowa Wyrównaj obrazy wewnątrz li Chrom Issue

Question

Chcę pionowe wyrównanie obrazów wewnątrz li, Mój kod działa dobrze w firefox, ale nie w chrome. Czy jakiekolwiek ciało może mi w tym pomóc?

Oto 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> 

i 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 góry dzięki.

Answer 1

CSS

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

My stosując powyższą właściwość CSS po prostu zrobić tag a do działania jako komórki tabeli i zajmują pełne height swojego rodzica i vertical-align:middle jego potomstwo

JS BIN DEMO

Answer 2

Dodaj float: left; jak pokazano:

#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

Dodaj vertical-align: middle; do li elementem:

#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>