中心A表格HTML CSS

Question

你好，我有問題爲登錄頁面的表單居中。我不擅長CSS，而且自從我玩過HTML以來已經有一段時間了。我想要做的是，將輸入框居中，並將輸入框頂部的文本對齊，並將圖像居中，如圖片所示。我曾嘗試添加不同的div id和標籤的形式，但我似乎無法弄清楚css部分。如果CSS很sl I，我很感激任何幫助和歉意。

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

 
}

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

Answer 1

我改進了你的HTML。所有表單輸入都應該有一個關聯的label元素。而不要使用br來代替間距使用填充/餘量。

進一步的使用有一個重複的id，id的必須是唯一的頁面。

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

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

Answer 2

要居中一個div設置margin-left和margin-right到auto並分配一個固定width給它。在你的情況下，這將是#login。

Answer 3

我已經爲您製作了一個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 4

一個在你的代碼的問題是，你使用ID「登錄」兩次，這一定不能做的。我把一個codepen，你可以在這裏找到：

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

我基本上沒有（除了加入表示要拍攝的圖像的DIV）：我指定以下CSS來包裝DIV整個周圍形式和形象。它使用flexbox將內容居中。另外，我爲form元素分配了width設置（40％）。

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