オブジェクトが中心にならない

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：#loginためのルールで

#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

、その親のテキストセンタリングが効果を発揮することができるように、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

あなただけの別の2 CSSを配置する必要があります。

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

#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; 
 
}

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