divの内部にテーブルを配置するにはどうすればいいですか？

div内の要素を縦と横の中央に配置したいと考えています。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にフレキシボックスディスプレイを使用することによって、これを達成することができます（ドキュメント：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:block cssプロパティを使用するだけで、テーブルを通常のblockコンテナとして扱うことができます。

出典

2017-03-15 22:56:13 Shalen

divの内部にテーブルを配置するにはどうすればいいですか？

答えて

関連する問題