如何将一个表放在div中心?

时间:2017-03-15 22:49:26

标签: html css

我想让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;
}

但它不起作用,请告诉我们如何制作它。谢谢。

3 个答案:

答案 0 :(得分:0)

result <- rbindlist(lapply(files.pet, fread, header = FALSE, sep = ","), idcol = "NDate")

另一种变体 Vertical alignment of elements in a div

答案 1 :(得分:0)

互联网已经对这个问题有很多答案......

鉴于此,如果需要,只需使用<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid" id="header_con"> <div class="container"> <div class="row" id="title_img_holder"> <img src="http://cdn.playbuzz.com/cdn/UserImages/4343091c-c906-457b-b885-77675c22c92f.jpg" class="mx-auto" alt="Smiley face" height="180" width="180"> </div> <div class="row" id="title_holder"> <h2 class="text-center">We fix screens. <small class="text-muted">Not for free though</small> </h2> </div> </div> </div> css属性即可将表作为普通block容器处理。

答案 2 :(得分:0)

您可以通过在CSS中使用flexbox显示来实现此目标(文档:https://www.w3schools.com/css/css3_flexbox.asp):

&#13;
&#13;
.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;
}
&#13;
<!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>
&#13;
&#13;
&#13;