Centralize image within LI



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



  • 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;
    }


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2