Flexbox e espa�amentos

23/01/2019

Segue o seguinte c�digo:

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title> Quadrado </title>
  <link rel="stylesheet" href="css/principal.css">
  <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
  <main>
    <header class="quadrado">
      <h1 class="h1"> Cadastro: </h1>
      <label>Nome: </label>
      <input type="text"></input>
      <label>Plataforma: </label>
      <input type="text"></input>
      <label>Ano: </label>
      <input type="date"></input>
      <button> Salvar </button>
    </header>
  </main>
</body>
</html>

Com o seguinte CSS:


main {
  display: flex;
  justify-content: center;
  height: 100%;
}

button {
  width: 8em;
}

label {
  font-family: ''Ubuntu'', sans-serif;
}

.h1 {
  font-size: 2em;
  font-family: monospace;
  text-align: center;
}

.quadrado {
  width: 15em;
  height: 15em;
  border: solid 2px black;
  display: flex;
  flex-direction: column;
  padding-left: 1em;
  padding-right: 1em;
}

Gostaria de posicionar, esse quadrado, no centro, tanto na verical quanto na horizontal. Na horizontal, consegui, mas na vertical, n�o tem jeito. N�o sei onde estou errando. Algu�m poderia ajudar? E mais, para adicionar espa�amento entre os campos, qual seria a melhor maneira?
Grato pela aten��o!

Bruno T.

Curtir t�pico + 1

Responder