Question

我对网页设计还很陌生，所以请忍受我缺乏知识和可能出现的愚蠢问题。我正在尝试创建一个登录页面，如下所示。

我已经将Username和Password表单放置在我以页面为中心的div元素内。但是，我没有设法在此div元素内正确地将用户名和密码字段居中。我试图通过将表单相对于div元素居中放置在页面中间，并将登录名放置在右下角来放置表单，但是，它仍然不起作用。此外，我无法正确将标题“ SampleWebPage”放置在正确的位置。

这是放置表单的居中div类的CSS和HTML代码。

.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>

很抱歉，这是一个非常广泛的问题，但是，我需要帮助才能使此网页正常工作。

谢谢。

Answer 1

您可以使用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>

为网站创建登录页面

1 个答案: