Center image within LI

Asked

Viewed 1,339 times

1

I’d like to center the images vertically, within the li. I 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>

css

  • Failed to post more code. For example, there is no class .marcas in the question code.

2 answers

1


I did it using flex display, but I also had to put a value for height... I didn’t touch anything in your code, I 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 you want to center the image in the horizontal center you can also use margin:auto since Dad has display:flex

a {
    margin: auto;
}

0

You can try it this way. The only problem is that you would need to fix 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>
  <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>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.