如何在html/css頁面的中心對齊表格

我是html/css的新手。我正在努力建立自己的形式，並且試圖將其與中心對齊。我在css中使用了align屬性，但它不起作用。如何在html/css頁面的中心對齊表格

HTML代碼：

<!DOCTYPE HTML> 
<head> 
    <title>Web Page Having A Form</title> 
    <link rel = "stylesheet" type="text/css" href="Form.css"> 
</head> 
<body> 
    <h1>Create a New Account</h1> 
     <form > 
     <table> 
     <tr> 
     <td>Name :</td> <td><input type="text" name="name"></td><br> 
     </tr> 
     <tr> 
     <td>Email :</td> <td><input type="text" name="email"></td><br> 
     </tr> 
     <tr> 
     <td>Password :</td> <td><input type="password" name="pwd"></td><br> 
     </tr> 
     <tr> 
     <td>Confirm Password :</td> <td><input type="password" name="cpwd"><br> 
     </tr> 
     <tr> 
     <td><input type="submit" value="Submit"></td> 
     </tr> 
     </table> 
     </form> 
</body>

CSS代碼：

body 
{ 
    background-color : #484848; 
} 
h1 
{ 
    color : #000000; 
    text-align : center; 
    font-family: "SIMPSON"; 
} 
form 
{ 
    align:"center"; 
}

我應該如何改變我的代碼對準中央的整個形式？

來源

2013-09-30 poorvankBhatia

做你想要的水平居中或垂直？ – avrahamcool

像這樣

demo

CSS

body { 
    background-color : #484848; 
    margin: 0; 
    padding: 0; 
} 
h1 { 
    color : #000000; 
    text-align : center; 
    font-family: "SIMPSON"; 
} 
form { 
    width: 300px; 
    margin: 0 auto; 
}

來源

2013-09-30 07:51:29 falguni

謝謝你的工作，你能告訴我爲什麼需要寬度？ – poorvankBhatia

你能解釋爲什麼'width'屬性是需要的嗎？ – Chip

我只想用表，而不是形式。它通過使用保證金來完成。

table { 
    margin: 0 auto; 
}

也嘗試使用類似

table td { 
    padding-bottom: 5px; 
}

，而不是<br />

，也是你的投入應與/> 結束例如：

<input type="password" name="cpwd" />

來源

2013-09-30 07:54:30 Ruddy

+1用於關閉標記中的元素。 – avrahamcool

或者你可以只使用<center></center> ta GS。

來源

2014-01-07 01:46:58 ashish0810

'貶值.. –

嘗試保證金：0汽車;在表單的容器div上。 – agconti

這是我的答案。我不是專業人士。我希望這個答案可以幫助你：3

<div align="center"> 
<form> 
. 
. 
Your elements 
. 
. 
</form> 
</div>

來源

2014-11-13 15:09:59 Puvipavan

非常簡單，它適用於我。謝謝！ – Francesc

其工作正常 –

包住<form>元素的div容器內，並應用CSS來的，而不是div這使得事情變得更加容易。

#aDiv{width: 300px; height: 300px; margin: 0 auto;}

<html> 
 

 
<head></head> 
 

 
<body> 
 
    <div> 
 
    <form> 
 
     <div id="aDiv"> 
 
     <table> 
 
      <tr> 
 
      <td>Name :</td> 
 
      <td> 
 
       <input type="text" name="name"> 
 
      </td> 
 
      <br> 
 
      </tr> 
 
      <tr> 
 
      <td>Email :</td> 
 
      <td> 
 
       <input type="text" name="email"> 
 
      </td> 
 
      <br> 
 
      </tr> 
 
      <tr> 
 
      <td>Password :</td> 
 
      <td> 
 
       <input type="password" name="pwd"> 
 
      </td> 
 
      <br> 
 
      </tr> 
 
      <tr> 
 
      <td>Confirm Password :</td> 
 
      <td> 
 
       <input type="password" name="cpwd"> 
 
       <br> 
 
      </tr> 
 
      <tr> 
 
      <td> 
 
       <input type="submit" value="Submit"> 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2015-11-20 10:12:21 Lucky

如何在html/css頁面的中心對齊表格

回答

相關問題