3

Olá, estou aprendendo sobre CSS3 e estou tentando centralizar uma div embaixo da outra para que fique mais ou menos dessa forma:

inserir a descrição da imagem aqui

Contudo a a minha tem ficado dessa forma: inserir a descrição da imagem aqui

Tentei usar os margin-bottom: -150px Não funcionou. E eu também tenho dúvida sobre se eu forçar em pixel não quebrar em layouts diferentes.

Meu código é esse:

<body>
  <div class="aaa">
    <div class="bbb">
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
    </div>
  </div>
</body>

<style>
  body {
    background: black;
  }

  .aaa {
    height: 500px;
    border: 1px solid black;
    background: #c72523;
    position: relative;
  }

  .bbb {
    position: absolute;
    margin: auto;
    width: 70%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: auto;
  }

  .a {
    width: 200px;
    height: 300px; 
    border: 1px solid black;
    background: red;
    transition: all 200ms ease-in-out;
  }

  .a:hover {
    transform: scale(1.5);
  }
</style>

1 Resposta 1

2

Segue aqui uma opção, como vc está usando position absolut na div dos link, use bottom e left e depois transform:translate para centralizar na base como vc quer. Para entender melhor veja o código abaixo.

Exiba em página toda para ver melhor o resultado

body {
  background: black;
}

.aaa {
  height: 500px;
  border: 1px solid black;
  background: #c72523;
  position: relative;
}

.bbb {
  position: absolute;
  margin: auto;
  width: 70%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: auto;

  bottom:0;
  left:50%;
  transform: translate(-50%, 50%);
}

.a {
  width: 200px;
  height: 300px; 
  border: 1px solid black;
  background: red;
  transition: all 200ms ease-in-out;
}

.a:hover {
  transform: scale(1.5);
}
<div class="aaa">
    <div class="bbb">
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
    </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .