Question

我真的很尴尬地问这个，但我无法找出为什么我的登录对象不会居中。我真的很陌生，我很抱歉这是一个愚蠢的问题。我希望有一个人可以帮助我。这是我的代码：

<div id="main">
<div id="login">
<h2>Login</h2>
<form action="" method="post">
<label>Username :</label>
<input id="name" name="username" placeholder="username" type="text">
<label>Password :</label>
<input id="password" name="password" placeholder="**********" type="password">
<input name="submit" type="submit" value=" Login ">
<span><?php echo $error; ?></span>
</form>
</div>
</div>

CSS：

#main {
width:960px;
margin:50px auto;
font-family:raleway;
text-align: center;
}
span {
color:red
}
h2 {
background-color: white;
text-align:center;
border-radius:10px 10px 0 0;
margin:-10px -40px;
padding:15px
}
hr {
border:0;
border-bottom:1px solid #ccc;
margin:10px -40px;
margin-bottom:30px
}
#login {
width:600px;
float:left;
border-radius:10px;
font-family:raleway;
border:2px solid #ccc;
padding:10px 40px 25px;
margin-top:70px;
}
input[type=text],input[type=password] {
width:100%;
padding:10px;
margin-top:8px;
border:1px solid #ccc;
padding-left:5px;
font-size:16px;
font-family:raleway
}
input[type=submit] {
width:103.5%;
background-color: #2F8059;
color:#fff;
border:2px solid #2F8059;
padding:10px;
font-size:20px;
cursor:pointer;
border-radius:5px;
margin-bottom:15px;
height: 50px;   

}
#profile {
padding:50px;
border:1px dashed grey;
font-size:20px;
background-color:#DCE6F7;
text-align: center; 

}
#logout {
float:right;
padding:5px;
border:dashed 1px gray
}
a {
text-decoration:none;
color:#6495ed
}
i {
color:#6495ed
}

Answer 1

在#login的规则中，移除float: left并插入display: inline-block，以便其父级的文本居中有效：

#main {
  width: 960px;
  margin: 50px auto;
  font-family: raleway;
  text-align: center;
}

span {
  color: red
}

h2 {
  background-color: white;
  text-align: center;
  border-radius: 10px 10px 0 0;
  margin: -10px -40px;
  padding: 15px
}

hr {
  border: 0;
  border-bottom: 1px solid #ccc;
  margin: 10px -40px;
  margin-bottom: 30px
}

#login {
  width: 600px;
  display: inline-block;
  border-radius: 10px;
  font-family: raleway;
  border: 2px solid #ccc;
  padding: 10px 40px 25px;
  margin-top: 70px;
}

input[type=text],
input[type=password] {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  border: 1px solid #ccc;
  padding-left: 5px;
  font-size: 16px;
  font-family: raleway
}

input[type=submit] {
  width: 103.5%;
  background-color: #2F8059;
  color: #fff;
  border: 2px solid #2F8059;
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 15px;
  height: 50px;
}

#profile {
  padding: 50px;
  border: 1px dashed grey;
  font-size: 20px;
  background-color: #DCE6F7;
  text-align: center;
}

#logout {
  float: right;
  padding: 5px;
  border: dashed 1px gray
}

a {
  text-decoration: none;
  color: #6495ed
}

i {
  color: #6495ed
}

<div id="main">
  <div id="login">
    <h2>Login</h2>
    <form action="" method="post">
      <label>Username :</label>
      <input id="name" name="username" placeholder="username" type="text">
      <label>Password :</label>
      <input id="password" name="password" placeholder="**********" type="password">
      <input name="submit" type="submit" value=" Login ">
      <span><?php echo $error; ?></span>
    </form>
  </div>
</div>

Answer 2

你只需要再放两个CSS：

 input{
   text-align:center; //center your placeholder
}
label { //center your labels
    display: block;
    text-align: center;
    line-height: 150%;
    font-size: .85em;
}

＆＃13;

#main {
width:960px;
margin:50px auto;
font-family:raleway;
text-align: center;
}
span {
color:red
}
h2 {
background-color: white;
text-align:center;
border-radius:10px 10px 0 0;
margin:-10px -40px;
padding:15px
}
hr {
border:0;
border-bottom:1px solid #ccc;
margin:10px -40px;
margin-bottom:30px
}
#login {
width:600px;
float:left;
border-radius:10px;
font-family:raleway;
border:2px solid #ccc;
padding:10px 40px 25px;
margin-top:70px;
}
input[type=text],input[type=password] {
width:100%;
padding:10px;
margin-top:8px;
border:1px solid #ccc;
padding-left:5px;
font-size:16px;
font-family:raleway
}
input[type=submit] {
width:103.5%;
background-color: #2F8059;
color:#fff;
border:2px solid #2F8059;
padding:10px;
font-size:20px;
cursor:pointer;
border-radius:5px;
margin-bottom:15px;
height: 50px;   

}
#profile {
padding:50px;
border:1px dashed grey;
font-size:20px;
background-color:#DCE6F7;
text-align: center; 

}
#logout {
float:right;
padding:5px;
border:dashed 1px gray
}
a {
text-decoration:none;
color:#6495ed
}
i {
color:#6495ed
}
input{
   text-align:center;
}
label {
    display: block;
    text-align: center;
    line-height: 150%;
    font-size: .85em;
}

＆＃13;

<div id="main">
<div id="login">
<h2>Login</h2>
<form action="" method="post">
<label>Username:</label>
<input id="name" name="username" placeholder="username" type="text">
<label>Password:</label>
<input id="password" name="password" placeholder="**********" type="password">
<input name="submit" type="submit" value=" Login ">
<span><?php echo $error; ?></span>
</form>
</div>
</div>

＆＃13;

对象不会居中

2 个答案: