Center image within LI

Question

Center image within LI

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'd like to centralize the images vertically, within li . I tried using vertical-align: middle , and I 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><liclass="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><liclass="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>

css

asked by anonymous 30.11.2017 / 17:38

2 answers

0

You can try it that way. The only problem is that you would need to set the height of each <li> .

.img-marca
{
  height: 100px;
  text-align: center;
}

.img-marca:before
{
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  content: ' ';
}

.img-marca > img
{
  vertical-align: middle;
}

<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><liclass="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><liclass="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>

30.11.2017 / 18:00

How to enter the column mean in all NA values Creation of variables

score 1 · Accepted Answer

I did using flex display, but I also needed to put a value for height ... I did not stick to anything in your code, I just put this 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><liclass="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><liclass="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 you want to center the image in the horizontal center you can also use margin:auto since the parent has display:flex

a {
    margin: auto;
}