0

I am fairly new to web design so please bear with my lack of knowledge and possible stupid questions. I am trying to create a login page as shown below. enter image description here

I have placed the Username and Password form inside a div element which I have centred on the page. However, I haven't managed to centre the Username and Password field correctly inside this div element. I tried to place form by centering it relative to the div element in the middle of the page and placing the login to the bottom right corner however, it still doesn't work. Further, I am not able to correctly place The header "SampleWebPage" in its correct place.

Here's the CSS and HTML code for the centred div class inside which the form is placed.

.login_div {

    width: 300px;
    height: 300px;

    /* Center form on page horizontally & vertically */
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
}
<html>
 <head>
  <title>Login Form</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="{{ url_for('static', filename='login.css') }}">
 </head>
<body>
 <div class = "login_div">
  
 <form action="" method = "post" class="login_form">
  Username:
  <input type="text" name="username" value="{{
          request.form.username }}">
 <br>
  Password:&nbsp; 
  <input type="password" name="password" value="{{
          request.form.password }}">
 <br>
  <input class="btn btn-default" type="submit" value="Login">
  </form>
  </div>
   
   
</body>
</html>

I'm sorry if this is a very broad question, however I require help getting this webpage to work correctly.

Thanks.

Samarth Upadhyaya
  • 31
  • 1
  • 4
  • 2
    Use your browser's debugging tools. Like "Inspect Element" when you right click. You should be able to navigate through DOM and see the elements and their respective rendered CSS. – Sunny Patel Aug 08 '18 at 15:52
  • 2
    Possible duplicate of [How to center an element horizontally and vertically?](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) – Sunny Patel Aug 08 '18 at 15:58
  • You also haven't shown any code for your Header element. – Sunny Patel Aug 08 '18 at 15:59

1 Answers1

3

You can use flexbox:

.login_div {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.row {
  padding: 10px;
}
.row.submit {
  text-align: right;
}
<head>
  <title>Login Form</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="{{ url_for('static', filename='login.css') }}">
</head>

<body>
  <div class="login_div">
    <form action="" method="post" class="login_form">
      <div class="row">
        <label>Username:
        <input type="text" name="username" value="{{request.form.username}}">
      </label>
      </div>
      <div class="row">
        <label> Password:
        <input type="password" name="password" value="{{request.form.password }}">
      </label>
      </div>
      <div class="row submit">
      <input class="btn btn-default" type="submit" value="Login">
      </div>
    </form>
  </div>


</body>
Simranjit Singh
  • 394
  • 1
  • 6