CODEWITHSUNDEEP
htmlcss
l1chorpe
l1chorpe

Reputation: 35

How can I center this form?

I made a login form that's perfectly horizontally centered for wide screens. Somehow, it's not the case with small screens, even though I used the viewport tag and margin: 0 auto;. What's wrong and how can I center it correctly?

html,
body {
  width: 100%;
}

body {
  text-align: center;
}

fieldset {
  border: 1px groove black;
  border-radius: 5px;
}

form {
  font-family: Segoe UI;
  margin: 0 auto;
  margin-top: 15%;
  width: 27.5%;
}

input {
  border: 1px rgb(175, 175, 175) solid;
  border-radius: 5px;
  font-family: Helvetica;
  font-size: 100%;
  margin-top: 2.5%;
  padding: 1% 0% 1% 0%;
}

legend {
  font-size: 150%;
}

button {
  background-color: rgb(0, 117, 255);
  border: 0px;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}

button:hover {
  background-color: rgb(0, 83, 255);
  transition: background-color 0.15s ease-in;
}

button#submit {
  font-size: 100%;
  margin-top: 7%;
  padding: 2.5% 10% 2.5% 10%;
}

button#signup {
  font-size: 100%;
  margin-top: 1%;
  padding: 0.6% 2.5% 0.6% 2.5%;
}
<!DOCTYPE html>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<html>

<head>
  <title>Login</title>
  <link rel="stylesheet" href="css/login.css">
</head>

<body>
  <form action="background_processing/login_process.php" enctype="multipart/form-data" method="post">
    <fieldset>
      <legend>Login</legend>
      <p>
        <label for="username">Username</label><br>
        <input type="text" id="username" name="username">
      </p>
      <p>
        <label for="password">Password</label><br>
        <input type="password" id="password" name="password">
      </p>
      <p>
        <button type="submit" id="submit">Log in</button>
      </p>
    </fieldset>
  </form><br>
  <button id="signup" onclick="window.open('https://google.com/','_self');">Sign up</button>
</body>

</html>

Here's my code: https://jsfiddle.net/gabwvf68

Upvotes: 0

Views: 109

Answers (4)

meNight Fury
meNight Fury

Reputation: 59

your form is actually centered, but in small screen, form content (fieldset, input etc.) kind of overflows your form area. you can visualize this by temporarily adding background-color to the form. In order to fix this, try setting larger width of form for smaller screen. Also, use px value for width instead of %, if possible

Upvotes: 0

James Wasson
James Wasson

Reputation: 514

This is your problem area:

    fieldset {
      border: 1px groove black;
      border-radius: 5px;
    }

    form {
      font-family: Segoe UI;
      margin: 0 auto;
      margin-top: 15%;
      width: 27.5%;
    }

We can fix it simply by doing:

    fieldset {
      border: 1px groove black;
      border-radius: 5px;
      width: 27.5%;
      margin: 0 auto;
    }

    form {
      font-family: Segoe UI;
      margin-top: 15%;
    }

Move the width and margin: 0 auto; to the fieldset.

margin 0 auto; should always go on the block you are trying to center not the parent block.

Upvotes: 2

Alessi 42
Alessi 42

Reputation: 1162

Your issue lies with the use of the <fieldset> tag which even though the parent form is correctly sized and centred the fieldset child does not display to this size.

One way around this if you do not require the fieldset tag is to use a div with the class fieldset.

You should probably also include a width: 100% attribute to the input fields so that they remain within the input form.

Example

html,
body {
  width: 100%;
}

body {
  text-align: center;
}

.fieldset {
  border: 1px groove black;
  border-radius: 5px;
}

form {
  font-family: Segoe UI;
  margin: 0 auto;
  margin-top: 15%;
  width: 27.5%;
}

input {
  border: 1px rgb(175, 175, 175) solid;
  border-radius: 5px;
  font-family: Helvetica;
  font-size: 100%;
  width: 100%;
  margin-top: 2.5%;
  padding: 1% 0% 1% 0%;
}

legend {
  font-size: 150%;
}

button {
  background-color: rgb(0, 117, 255);
  border: 0px;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}

button:hover {
  background-color: rgb(0, 83, 255);
  transition: background-color 0.15s ease-in;
}

button#submit {
  font-size: 100%;
  margin-top: 7%;
  padding: 2.5% 10% 2.5% 10%;
}

button#signup {
  font-size: 100%;
  margin-top: 1%;
  padding: 0.6% 2.5% 0.6% 2.5%;
}
<!DOCTYPE html>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<html>

<head>
  <title>Login</title>
  <link rel="stylesheet" href="css/login.css">
</head>

<body>
  <form action="background_processing/login_process.php" enctype="multipart/form-data" method="post">
    <div class="fieldset">
      <legend>Login</legend>
      <p>
        <label for="username">Username</label><br>
        <input type="text" id="username" name="username">
      </p>
      <p>
        <label for="password">Password</label><br>
        <input type="password" id="password" name="password">
      </p>
      <p>
        <button type="submit" id="submit">Log in</button>
      </p>
    </div>
  </form><br>
  <button id="signup" onclick="window.open('https://google.com/','_self');">Sign up</button>
</body>

</html>

Hope this helps!

Upvotes: 0

Anand G
Anand G

Reputation: 3210

You form has the width in percent is smaller that the fieldset area. Hence when you resize the window to smaller size it moves right to get the remaining wind of the window. Try giving fix width or the width as much as fieldset element width.

Like below I gave width:55% and it works fine for all window size. If you want the box width as given in the example, try giving it width:300px

html,
body {
  width: 100%;
}

body {
  text-align: center;
}

fieldset {
  border: 1px groove black;
  border-radius: 5px;
}

form {
  font-family: Segoe UI;
  margin: 0 auto;
  margin-top: 15%;
  width: 55%;
}

input {
  border: 1px rgb(175, 175, 175) solid;
  border-radius: 5px;
  font-family: Helvetica;
  font-size: 100%;
  margin-top: 2.5%;
  padding: 1% 0% 1% 0%;
}

legend {
  font-size: 150%;
}

button {
  background-color: rgb(0, 117, 255);
  border: 0px;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}

button:hover {
  background-color: rgb(0, 83, 255);
  transition: background-color 0.15s ease-in;
}

button#submit {
  font-size: 100%;
  margin-top: 7%;
  padding: 2.5% 10% 2.5% 10%;
}

button#signup {
  font-size: 100%;
  margin-top: 1%;
  padding: 0.6% 2.5% 0.6% 2.5%;
}
<!DOCTYPE html>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<html>

<head>
  <title>Login</title>
  <link rel="stylesheet" href="css/login.css">
</head>

<body>
  <form action="background_processing/login_process.php" enctype="multipart/form-data" method="post">
    <fieldset>
      <legend>Login</legend>
      <p>
        <label for="username">Username</label><br>
        <input type="text" id="username" name="username">
      </p>
      <p>
        <label for="password">Password</label><br>
        <input type="password" id="password" name="password">
      </p>
      <p>
        <button type="submit" id="submit">Log in</button>
      </p>
    </fieldset>
  </form><br>
  <button id="signup" onclick="window.open('https://google.com/','_self');">Sign up</button>
</body>

</html>

Upvotes: 1

Related Questions