Centralize image within LI

[emmalee]

I would like to center the images vertically, within the I read. Tried to use vertical-align: middle, and did not succeed.

.marcas {
  margin: 30px auto 0;
  padding: 60px 0;
  height: 185px;
  background: #e6e7e8;
}
.marcas .bx-viewport {

height: 80px !important;

}
.marcas .wrap-marcas {

font-size: 0;

padding: 0;

margin: 0;

text-align: center;

}
.marcas .wrap-marcas .img-marca {

width: 16.3%;

display: table;

vertical-align: middle;

text-align: center;

margin: 10px 45px;

}
.marcas .wrap-marcas .img-marca a {

display: inline-block;

width: 100%;

height: 65px;

vertical-align: middle;

margin: 0 auto;

}
.marcas .wrap-marcas .img-marca img {

max-width: 100%;

max-height: 65px;

display: inline-block;

}

<ul>

<li class="img-marca" style="float: left; list-style: none; position: relative; width: 212.25px;">

<a href="/filtro/marca/probiotica">

<img src="https://jsfiddle.net/img/logo.png">

</a>

</li>

<li class="img-marca" style="float: left; list-style: none; position: relative; width: 212.25px;">

<a href="/filtro/marca/probiotica">

<img src="https://jsfiddle.net/img/logo.png">

</a>

</li>

<li class="img-marca" style="float: left; list-style: none; position: relative; width: 212.25px;">

<a href="/filtro/marca/probiotica">

<img src="https://launchbit.com/carbon-i/6599-ToptalCarbon.jpg">

</a>

</li>

</ul>

[irl]

I did using flex display, but I also needed to put a value to height... I didn't touch anything in your code, just put that style at the end of your css.

ul li {
    display: flex;
    align-items: center;
    height: 100px;
}

.marcas {
    margin: 30px auto 0;
    padding: 60px 0;
    height: 185px;
    background: #e6e7e8;
  }
.marcas .bx-viewport {

height: 80px !important;

}
.marcas .wrap-marcas {

font-size: 0;

padding: 0;

margin: 0;

text-align: center;

}
.marcas .wrap-marcas .img-marca {

width: 16.3%;

display: table;

vertical-align: middle;

text-align: center;

margin: 10px 45px;

}
.marcas .wrap-marcas .img-marca a {

display: inline-block;

width: 100%;

height: 65px;

vertical-align: middle;

margin: 0 auto;

}
.marcas .wrap-marcas .img-marca img {

max-width: 100%;

max-height: 65px;

display: inline-block;

}
ul li {

display: flex;

align-items: center;

height: 100px;

}

<ul>

<li class="img-marca" style="float: left; list-style: none; position: relative; width: 212.25px;">

<a href="/filtro/marca/probiotica">

<img src="https://jsfiddle.net/img/logo.png">

</a>

</li>

<li class="img-marca" style="float: left; list-style: none; position: relative; width: 212.25px;">

<a href="/filtro/marca/probiotica">

<img src="https://jsfiddle.net/img/logo.png">

</a>

</li>

<li class="img-marca" style="float: left; list-style: none; position: relative; width: 212.25px;">

<a href="/filtro/marca/probiotica">

<img src="https://launchbit.com/carbon-i/6599-ToptalCarbon.jpg">

</a>

</li>

</ul>

If vc wants to centralize the image in horizontal center also vc can use margin:auto since the father has display:flex

a {

margin: auto;

}