scss Flex Snippets

Posted 2021-05-17

// Centralizar icone no meio de uma imagem verticalmente e horizontalmente
// HTML
// <a href="/">
//   <figure>
//     <img src="./img/_cardhighlight1.png" alt="">
//   </figure>
//   <i class="fa fa-play-circle-o"></i>
// </a>

// SCSS
>a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  >figure {
    >img {}
  }

  >i {
      position: absolute;
      font-size: 3.5em;
    }
  }