时间戳

首页 > 解决方案 > 将 Css 表单与页面中心对齐（是的，我查看了其他答案，我无法让它工作）

css - 将 Css 表单与页面中心对齐（是的，我查看了其他答案，我无法让它工作）

问题描述

我正在尝试对齐此 html 表单。我已经做了一个小时了，没有希望。我不知道我在这里做错了什么。我真的很感激这方面的一些帮助。

html:

<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "CSS/Login.css">
</head>
<body>
<h1> Admin Panel </h1>
<div class = "form-div">
    <form action = "Login.php" method = "POST">
        <input type = "email" name = "emailPost" placeholder = "Enter email..." required>
        <input type = "password" name = "passwordPost" placeholder = "Enter password..." required>
        <input type = "submit" value = "Submit">
    </form>
</div>

CSS：

body {
background-color: #f4f4f4;
font: normal 16px Arial, Helvetica, sans-serif;
line-height:1.6em;
text-align: center;

}

.form-div {
display: table;
width: 100%;
background-color: red;
}

form {
display: table-cell;
text-align: center;
vertical-align: middle;
}

form input[type="email"], [type="password"] {
border:none;
background:#f4f4f4;
border-bottom:1px solid black;
outline:none;
line-height:28px;
font-size:16px;
}

input[type="submit"] {
background-color:#333;
color:#fff;
padding:10px 15px;
border:none;
}

谢谢！

标签： css

解决方案

调整大小时使用百分比将起作用。其中 px 是静态的，百分比将取决于屏幕大小。如果屏幕是 1000px，而你的 div 是 50%，那么 div 就是 500px。在使用 px 的地方，div 的大小永远不会改变。

这个例子见这个小提琴：https ://jsfiddle.net/eo9kcjv3/

HTML：

<body>
  <h1> Admin Panel </h1>
  <div class = "form-div">
    <form action = "Login.php" method = "POST">
        <input type = "email" name = "emailPost" placeholder = "Enter email..." required>
        <input type = "password" name = "passwordPost" placeholder = "Enter password..." required>
        <input type = "submit" value = "Submit">
    </form>
  </div>
</body>

CSS：

body {
background-color: #f4f4f4;
font: normal 16px Arial, Helvetica, sans-serif;
line-height:1.6em;
text-align: center;
}

.form-div {
display: table;
width: 100%;
background-color: red;
height: 30%;
margin-top:10%
}

form {
display: table-cell;
text-align: center;
vertical-align: middle;
}

form input[type="email"], [type="password"] {
border:none;
background:#f4f4f4;
border-bottom:1px solid black;
outline:none;
line-height:28px;
font-size:16px;
display: block;
width:20%;
margin-left:40%;
margin-top:10px;
}

input[type="submit"] {
background-color:#333;
color:#fff;
padding:10px 15px;
border:none;
margin-top:10px;
margin-bottom:10px;
}`

推荐阅读