-1

Ich bin nicht in der Lage, meine Form vertikal auszurichten, buchstäblich alles versucht. Rand, vertikal ausrichten, Höhe, Position - versucht, alles anzuwenden, aber nichts scheint zu funktionieren.Das Element auf der Seite vertikal zentrieren

Hier ist die HTML und CSS, die ich benutze.

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; 
 

 
}

<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="[email protected]" 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>

Quelle

2016-07-10 user3516328

gibt es wie 1000000 Fragen darüber auf stackoverflow –

http://howtocenterincss.com – gearsdigital

unten Versuchen:

Vertical-align Willen arbeitet mit display:table;

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; 
 

 
}

<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="[email protected]" 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>

EDIT: Ja. Verwenden Sie center-block Klasse Bootstrap.

Quelle

2016-07-10 08:52:31 Sankar

Kann ich es tun, ohne vertikale Ausrichtung verwenden. Oder kann ich margin: auto auto; oder eine andere Methode, um das zu erreichen – user3516328

@ user3930050 aktualisiert ... – Sankar

müssen Sie Stil, um die

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

Quelle

2016-07-10 09:15:13

paar Lösungen Form gelten:

Sie flex verwenden können, und es ist Eigenschaften (justify-content und align-items) wie vertical-align und fügen Sie diese Zeilen an alle Eltern von ein Kind, das vertikal ausgerichtet werden soll (z. B .: .center)

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

Wenn Sie die flex Lösung nicht gefällt, können Sie die Position der Eltern auf „relative“ (position:relative;), und fügen Sie diesen Code für das Kind:

.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%); 
}

Hoffe, es war hilfreich =]

Quelle

2016-07-10 09:16:52 natanelg97

Das Element auf der Seite vertikal zentrieren

Antwort

müssen Sie Stil, um die

Verwandte Themen