Html - block is not centered

DezersniPer
December 9, 2024
59 views
2 votes
3 Answers

I want .Input to be in the center, I mean username and passwor, that is, the entire block except the header
img shows exactly what is needed
you need to make in the center so that it looks like logging in using username and password

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.logo {
  background-color: #333;
  padding: 10px;
}

.logo-name {
  color: white;
  text-align: center;
}

.Input {
  display: flexbox;
  margin: auto;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="logo">
    <h1 class="logo-name">PinqWest</h1>
  </div>


  <div class="Input">
    <form action="#" method="post">
      <h2 class="welcome">Welcome!</h2>
      <input type="text" class="username" placeholder="username" required>
      <br><br>
      <input type="password" class="password" placeholder="password" required>
      <br><br>
      <button type="submit" class="enter">Enter</button>
    </form>

    <input type="checkbox" class="remember"> Remember me
    <br>
    <a href="#" class="forget">Forget password?</a>
    <br>
    <div class="register">Don't have an account? <a class="register-link" href="#">Register</a></div>
  </div>
</body>

</html>

Tags: css html

Answers

To create a flexbox the correct declaration is display: flex … not display: flexbox.

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: yellow;
  display: grid;
  grid-template-rows: auto 1fr;
}

header {
  background-color: #333;
  padding: 10px;
}

header h1 {
  color: white;
  text-align: center;
  margin: 0;
}

main.login, main.login form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

main.login {
  background: aliceblue;
}

main.login form {
  margin-bottom: 2em;
  gap: 1em;
}

main.login h2 {
  margin: 0;
}

<header>
    <h1>PinqWest</h1>
</header>

<main class="login">
  <form action="#" method="post">
      <h2 class="welcome">Welcome!</h2>
      <input type="text" class="username" placeholder="username" required>
      <input type="password" class="password" placeholder="password" required>
      <button type="submit" class="enter">Enter</button>
  </form>

  <div><input type="checkbox" class="remember"> Remember me</div>
  <div><a href="#" class="forget">Forget password?</a></div>
  <div class="register">Don't have an account? <a class="register-link" href="#">Register</a></div>
</main>

After runnning this snippet, use the full page link to see the full effect.

You are supposed to use display: flex; not display: flexbox;.

Also, you centrally align the whole contain you must define some width.

I have applied border property for understanding purpose, you can remove.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.logo {
  background-color: #333;
  padding: 10px;
}

.logo-name {
  color: white;
  text-align: center;
}

.Input {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  height: 100vh;
  width: 50%;
  background: #CCC;
  border: 1px solid #F00;
}

<div class="logo">
  <h1 class="logo-name">PinqWest</h1>
</div>


<div class="Input">
  <form action="#" method="post">
    <h2 class="welcome">Welcome!</h2>
    <input type="text" class="username" placeholder="username" required>
    <br><br>
    <input type="password" class="password" placeholder="password" required>
    <br><br>
    <button type="submit" class="enter">Enter</button>
  </form>

  <input type="checkbox" class="remember"> Remember me
  <br>
  <a href="#" class="forget">Forget password?</a>
  <br>
  <div class="register">Don't have an account? <a class="register-link" href="#">Register</a></div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.logo {
  background-color: #333;
  padding: 10px;
}

.logo-name {
  color: white;
  text-align: center;
}

.Input {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  height: 100vh;
  width: 50%;
  background: #CCC;
  border: 1px solid #F00;
}

<div class="logo">
  <h1 class="logo-name">PinqWest</h1>
</div>


<div class="Input">
  <form action="#" method="post">
    <h2 class="welcome">Welcome!</h2>
    <input type="text" class="username" placeholder="username" required>
    <br><br>
    <input type="password" class="password" placeholder="password" required>
    <br><br>
    <button type="submit" class="enter">Enter</button>
  </form>

  <input type="checkbox" class="remember"> Remember me
  <br>
  <a href="#" class="forget">Forget password?</a>
  <br>
  <div class="register">Don't have an account? <a class="register-link" href="#">Register</a></div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – block is not centered

Answers