如何將一個表格放在div的中間？

這裏是我的HTML：

<!DOCTYPE html> 
<html> 
<head> 
<title>Login</title> 
</head> 
<body> 
<div class="login"> 
    <form action="prosesLogin.php" method="post"> 
     <h1>Login</h1> 
     <table> 
      <tbody> 
       <tr><td>Username</td><td><input type="text" name="username"></td></tr> 
       <tr><td>Password</td><td><input type="password" name="password"></td></tr> 
       <tr><td colspan="2" align="right"><input type="submit" value="Login"> <input type="reset" value="Batal"></td></tr> 
       <tr><td colspan="2" align="center">Belum memiliki akun ? <a href="register.php"><b>Daftar</b></a></td></tr> 
      </tbody> 
     </table> 
    </form> 
</div> 
</body> 
</html>

，這是我的CSS：

.login{ 
    height: auto; 
    margin: 0 auto; 
    border:1px solid blue; 
}

但它不能正常工作，請告訴如何做到這一點。謝謝。

來源

2017-03-15 brown26

您可以通過在你的CSS使用Flexbox的顯示器實現這一點（文檔：https://www.w3schools.com/css/css3_flexbox.asp）：

.login{ 
 
    height: auto; 
 
    margin: 0 auto; 
 
    border:1px solid blue; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
} 
 

 
.login h1 { 
 
    margin-top: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Login</title> 
 
</head> 
 
<body> 
 
<div class="login"> 
 
    <form action="prosesLogin.php" method="post"> 
 
     <h1>Login</h1> 
 
     <table> 
 
      <tbody> 
 
       <tr><td>Username</td><td><input type="text" name="username"></td></tr> 
 
       <tr><td>Password</td><td><input type="password" name="password"></td></tr> 
 
       <tr><td colspan="2" align="right"><input type="submit" value="Login"> <input type="reset" value="Batal"></td></tr> 
 
       <tr><td colspan="2" align="center">Belum memiliki akun ? <a href="register.php"><b>Daftar</b></a></td></tr> 
 
      </tbody> 
 
     </table> 
 
    </form> 
 
</div> 
 
</body> 
 
</html>

來源

2017-03-15 22:59:13 Larpee

<div id="parent"> 
    <div id="child">body</div> 
</div> 

<style> 
#parent {display: table;} 
#child { 
    display: table-cell; 
    vertical-align: middle; 
} 
</style>

鑑於此，如果需要另一個變種 Vertical alignment of elements in a div

來源

2017-03-15 22:55:52

互聯網已經有很多回答這個問題......

，你可以哈通過僅使用display:blockcss屬性將表格視爲正常的block容器。

來源

2017-03-15 22:56:13 Shalen

如何將一個表格放在div的中間？

回答

相關問題