Vertical Align images inside li Chrome Issue - html

Question

I want to vertically align images inside li, My code works fine in firefox but not in chrome. Can any body help me with this?
Here is the HTML:
<div class="brands container content">
<ul id="brandlogo">
<li><img src="https://images-na.ssl-images-amazon.com/images/I/12MlwaGE42L.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/12rC5bPL82L.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/220GuD5uB5L.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/12qBKSlxODL.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/127dR7ho7TL.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/22gR5V1VEFL.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/22Sr0En0GzL.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/12JRdD3GOjL.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/22bm9-FDvpL.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/12mGjpXipJL.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/22D0pbgaokL.png" alt=""/></li>
</ul>
</div>
and 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
Thanks in advance.

Answer 1

Add vertical-align: middle; to li element:
#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>

Answer 2

CSS
#brandlogo li a {
float: none;
width: 100%;
height: inherit;
display: table-cell;
vertical-align: middle;
}
My using the above CSS property we just make the a tag to act as a table cell and occupy full height of its parent and vertical-align:middle its childern
JS BIN DEMO

Answer 3

Add a float: left; as shown:
#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;