将元素垂直居中在页面上

时间：2016-07-10 08:44:17

标签： html css html5 css3

我无法垂直对齐我的形式，从字面上尝试了一切。 边缘，垂直对齐，高度，位置 - 尝试应用所有内容，但似乎没有任何工作。

这是我正在使用的html和css。

＆＃13;
＆＃13; 
html{
    position: relative;
    background-color: #e1e8f0;
    font-size:62.5%;
    margin: 0px;
    padding: 0px;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    height: 500px;
}
.navbar{
    border: none;
}
body{
    background-color: #e1e8f0;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    position: relative;
    height: 500px;
    width: device-width;
}
.signup{
    position: relative;
    height: 100%;
    width: 50%;
    margin: auto auto;
    margin-left: 50%;
    font-size: 1.6em;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    border: 1px solid black;
}
.signup input{
    margin:20px;
    text-decoration: none;
    border: 1px solid #e4e6e8;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    border-radius: 5px;
    padding: 2px;
}
.message{
    width: 50%;
    float: left;
    overflow: hidden;
}
.message pre{
    overflow: hidden;
}
.center{
    position: relative;
    width: 80%;
    height: 70%;
    margin: auto auto;
    border: 1px solid black;
}
table{
    height: 100%;
    margin: auto auto;

}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="E:\d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/lib/bootstrap.css">
<link rel="stylesheet" type="text/css" href="E:\d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/css/my css.css">

</head>
<body>

<nav class="navbar navbar-default" style="background-color:#222222;color:red;">
  <div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="file:///E:/d%20v/MEAN%20Lynda%20-%20Developing%20for%20the%20MEAN%20Stack%20and%20MongoDB/projects/others/lib/login.html" style="color:#fff;">SITE NAME</a>
    </div>
    <div class="collapse navbar-collapse" id="#myNavbar">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#" style="color:#fff;" >WHO</a></li>
            <li><a href="#" style="color:#fff;" >Sign up</a></li>
            <li><a href="#" style="color:#fff;" >Login</a></li>
        </ul>
    </div>
  </div>
</nav>





<div class="signup">
<div class="center">
    <form action="#" method="get">
        <table border="black">
            <tr>
                    <td><label for="emailId">Email id</label>
                    <td><input type="email" placeholder="you@example.com" id="emailId"></input><br>
            </tr>
            <tr>
                <td><label for="password">Password</label>
                <td><input type="password" placeholder="********" id="password"></input><br>
            </tr>
            <tr>
                <td><label for="name">Name</label>
                <td><input type="text" placeholder="Steve Jobs :)" id="name"></input><br>
            </tr>
            <tr>
                <td></td>
                <td><button type="submit" class="btn btn-primary">Sign Up</button></td>
            </tr>
        </table>
    </form>
</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

尝试以下：

Vertical-align适用于display:table;

＆＃13;
＆＃13; 
html{
    position: relative;
    background-color: #e1e8f0;
    font-size:62.5%;
    margin: 0px;
    padding: 0px;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    height: 500px;
}
.navbar{
    border: none;
}
body{
    background-color: #e1e8f0;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    position: relative;
    height: 500px;
    width: device-width;
}
.signup{
    position: relative;
    height: 100%;
    width: 100%;
  display:table;
    margin: auto auto;
   
    font-size: 1.6em;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    border: 1px solid black;
}
.signup input{
    margin:20px;
    text-decoration: none;
    border: 1px solid #e4e6e8;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    border-radius: 5px;
    padding: 2px;
}
.message{
    width: 50%;
    float: left;
    overflow: hidden;
}
.message pre{
    overflow: hidden;
}

table{
    height: 100%;
    margin: auto auto;

}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="E:\d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/lib/bootstrap.css">
<link rel="stylesheet" type="text/css" href="E:\d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/css/my css.css">

</head>
<body>

<nav class="navbar navbar-default" style="background-color:#222222;color:red;">
  <div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="file:///E:/d%20v/MEAN%20Lynda%20-%20Developing%20for%20the%20MEAN%20Stack%20and%20MongoDB/projects/others/lib/login.html" style="color:#fff;">SITE NAME</a>
    </div>
    <div class="collapse navbar-collapse" id="#myNavbar">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#" style="color:#fff;" >WHO</a></li>
            <li><a href="#" style="color:#fff;" >Sign up</a></li>
            <li><a href="#" style="color:#fff;" >Login</a></li>
        </ul>
    </div>
  </div>
</nav>





<div class="signup">
    <form action="#" class="center-block" method="get">
        <table border="black">
            <tr>
                    <td><label for="emailId">Email id</label>
                    <td><input type="email" placeholder="you@example.com" id="emailId"></input><br>
            </tr>
            <tr>
                <td><label for="password">Password</label>
                <td><input type="password" placeholder="********" id="password"></input><br>
            </tr>
            <tr>
                <td><label for="name">Name</label>
                <td><input type="text" placeholder="Steve Jobs :)" id="name"></input><br>
            </tr>
            <tr>
                <td></td>
                <td><button type="submit" class="btn btn-primary">Sign Up</button></td>
            </tr>
        </table>
    </form>
</div>
＆＃13;
＆＃13;
＆＃13;

修改 是。使用center-block类引导程序。

答案 1 :(得分：0)

您必须将样式应用于表单

   <style>
        form {
        margin: 15% 40% 0;
        }
    </style>

答案 2 :(得分：0)

很少解决方案：

您可以使用flex及其属性（justify-content和align-items），例如vertical-align，并将这些行添加到您想要垂直对齐的子项的每个父项（例如：.center）

.center {
    display:-webkit-flex;
    display:flex;
    align-items:center;
    justify-content:center;
}

如果您不喜欢flex解决方案，可以将父级的位置设置为“relative”（position:relative;），并将此代码插入子级：

.center {
    position:relative;
}

.center table {
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

希望它有用=]

相关问题
最新问题