Question

您好我遇到了以登录页面为中心的问题。我不熟悉CSS，因为我玩过HTML已经有一段时间了。我想要做的是，将输入框居中并对齐输入字段顶部的文本，并使图像居中，如图所示。我尝试在表单中添加不同的div id和标签，但我似乎无法弄清楚css部分。如果CSS很草率，我感谢任何帮助和抱歉。

＆＃13;

body {
    background-color:lightgray; 
    font-family:Verdana, Arial, Helvetica, sans-serif;  
}
h1 {
    color: black;
}
p {
    color: black;
}

html {
    text-alight: center;
}

#login {
    text-align:center; 
}

input[type=text], input[type=date], input[type=password] {
    width: 30%;
    height: 50px;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}

input[type=submit] {
    width: 30%;
    height: 50px;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

#service_type, #series, #speaker, #users {
    width: 30%;
    height: 50px;   
}

@media only screen and (max-device-width: 1024px){

input[type=text], input[type=date], input[type=password] {
    width: 100%;
    height: 50px;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    height: 50px;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

#service_type, #series, #speaker, #users{
    width: 100%;
    height: 50px;
}

#keypad_users{
    width: 345px;
    height: 50px;
    vertical-align:middle; 
    text-align:center;
    border:1px solid #000000; 
    font-size:30px; 
    font-weight:bold;
}

#keypad {margin:auto; margin-top:10px;}

#keypad tr td {
    vertical-align:middle; 
    text-align:center; 
    border:1px solid #000000; 
    font-size:18px; 
    font-weight:bold; 
    width:100px; 
    height:80px; 
    cursor:pointer; 
    background-color:#666666; 
    color:#CCCCCC;
}

#keypad tr td:hover {
background-color:#999999; 
color:#FFFF00;
}

#display {
text-align:center; 
    width:345px; 
    margin:10px auto auto auto; 
    background-color:#000000; 
    color:#00FF00; 
    font-size:48px; 
    border:1px solid #999999;
}
#message {
    text-align:center; 
    color:#009900; 
    font-size:18px; 
    font-weight:bold; 
    display:none;
}

}

＆＃13;

<div id="login">
<form action = "login.php" id="login" method ="POST">
Username <br />
<input type="text" name="username" id="username" required /><br /><br />
Password <br />
<input type ="password" name="password" id="password" required /><br /><br />

<input type="submit" name="submit" value="Log in">

</form> 
</div>

＆＃13;

Answer 1

我为你制作了一个JSfiddle here (click me please)，类似于你添加的图片。

根据要求不使用像我这样的第三方：

HTML

<div id="login">
  <form action = "login.php" id="login" method ="POST">
    <div class="picture">

    </div>
    <p>Username</p>
    <input type="text" name="username" id="username" required /><br /><br />

    <p>Password</p>
    <input type ="password" name="password" id="password" required /><br /><br />

    <input type="submit" name="submit" value="Log in">
  </form> 
</div>

CSS

body
{
    background-color:lightgray; 
    font-family:Verdana, Arial, Helvetica, sans-serif;  
}

#login
{
    text-align:center;
    width: 50%;
    margin: 0 auto;
}
.picture
{
  width:100px;
  height: 100px;
  border-radius: 100px;
  background-color:red;
  margin: 0 auto;
}
#login p
{
  float: left;
}
input[type=text], input[type=date], input[type=password] {
    width: 100%;
    height: 50px;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    height: 50px;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

修改这里有一个新的小提琴：https://jsfiddle.net/gay1ufa1/2/

Answer 2

我改进了您的HTML。所有表单输入都应具有关联的label元素。也不要使用br来代替使用填充/边距。

进一步使用有重复的id，ID必须是页面唯一的。

＆＃13;

#login_container  /*This is Our base container for the login "control" */
{
  width:30%; /*Define the width of the control*/
  margin:auto; /*This Provide the horizontal centering of the control*/
  padding:120px 10px 10px 10px; /*Add some padding, the first number is the top and provides room for the image*/
  background-image:url(" http://fillmurray.com/100/100"); /*Add our background image, thanks Bill Murray*/
  background-position:center 10px; /*Position our image, first is Horizontal alignment, second is top*/
  background-repeat:no-repeat; /*One Bil Murray is more than enough*/
  background-color: #F0F0F0; /*Base Background image*/
}

#login_container label
{
  display:block;  /*Label will now take up a whole line*/
  margin-bottom:.25em; /*Give it some room underneath*/
}

#login_container input[type="text"], #login_container input[type="password"], #login_container input[type="submit"]
{
  width:100%; /*Form controls now take 100% width of the container*/
  margin-bottom:0.5em;
}

＆＃13;

<div id="login_container"> <!-- Can't have duplicate ID's -->
<form action = "login.php" id="login" method ="POST">
   <label for="username">Username </label>
   <input type="text" name="username" id="username" required />
   <label for="password">Password</label>
   <input type ="password" name="password" id="password" required />
   <input type="submit" name="submit" value="Log in">
</form> 
</div>

＆＃13;

Answer 3

您的代码中的一个问题是您使用ID“登录”两次，这不能完成。我把一个codepen放在一起，你可以在这里找到：

http://codepen.io/anon/pen/dNWQgp

我基本上做了什么（除了在图片中添加代表图像的div）：我将以下CSS分配给整个表单和图像周围的包装器DIV。它使用flexbox来对内容进行居中。另外，我为width元素分配了form设置（40％）。

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Answer 4

将div集margin-left和margin-right集中到auto，并为其分配固定的width。在您的情况下，这将是#login。

中心表单HTML CSS

4 个答案: