Wie kann man div in Bootstrap vertikal ausrichten?

body { 
 
    background-color: #ecf0f1; 
 
} 
 

 
.sign-box { 
 
    position: relative; 
 
    padding: 20px; 
 
    padding-bottom: 20px; 
 
    border: 1px solid #bdc3c7; 
 
    border-radius: 4px; 
 
    background-color: white; 
 
} 
 

 

 
.input-box { 
 
    padding: 10px 10px 20px 10px; 
 
    border: 0px; 
 
    border-bottom: 2px solid #606060; 
 
    width: 100%; 
 
    font-size: 14px; 
 
    font-weight: 600 !important; 
 
    color: #606060; 
 
} 
 

 
.input-box:focus { 
 
    color: #9b59b6; 
 
    border-bottom: 2px solid #9b59b6; 
 
} 
 

 
.submit-btn { 
 
    margin-top: 20px; 
 
    padding: 12px 10px 12px 10px; 
 
    font-weight: 600; 
 
    font-size: 14px; 
 
    letter-spacing: 2px; 
 
    border: 1px solid #8e44ad; 
 
    border-radius: 40px; 
 
    width: 100%; 
 
    color: white; 
 
    background-color: #9b59b6; 
 
    transition: all 0.25s ease-in-out; 
 
} 
 

 
.submit-btn:hover { 
 
    color: white; 
 
    background-color: #8e44ad; 
 
    box-shadow: 0 6px 16px rgba(145, 92, 182, .4); 
 
} 
 

 
.h2-form { 
 
    margin-bottom: 20px; 
 
    font-weight: bold; 
 
    letter-spacing: 1px; 
 
    color: #606060; 
 
} 
 

 
.col-centered { 
 
    float: none; 
 
    margin: 0 auto; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
    <head> 
 

 
    <title>sfs!</title> 
 

 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
    <link rel="stylesheet" href="main.css"> 
 

 
    </head> 
 

 
    <body> 
 

 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-sm-6 col-centered sign-box"> 
 
      <h2 class="h2-form">Sign in!</h2> 
 
      <form> 
 
      <div class="form-group"> 
 
       <input class="input-box" type="email" class="form-control" id="email" placeholder="Email address"> 
 
      </div> 
 
      <div class="form-group"> 
 
       <input class="input-box" type="password" class="form-control" id="pwd" placeholder="Password"> 
 
      </div> 
 
      <button type="submit" class="submit-btn">SIGN IN</button> 
 
      </form> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </body> 
 

 
</html>

Ich muss es senkrecht zum Zentrum der Webseite auszurichten. Ich habe eine Webseite angemeldet und angemeldet, ähnlich der, die ich zur Verfügung gestellt habe, und ich muss beide genau auf die Mitte der Webseite ausrichten, ohne merkwürdig auszusehen.

Quelle

2017-06-17 Anonymous

Bitte entfernen Sie nicht Ihren gesamten Code von Ihrer Frage. Dies würde Ihre Frage zum Thema für die Website stellen. – Bugs

Sie können den folgenden Code in die div mit der Klasse „Container“ gelten:

position: relative; 
top: 50%; 
transform: translateY(-50%);

Dies wird die Top-Form genau auf die Mitte des Bildschirms bewegen und dann wird es ihn auf wert zurückbewegen genau 50% seiner Höhe.

Quelle

2017-06-17 15:59:50 Kaloyan

Höhe .col zentrierten und zur Benutzung des CSS

.col-centered { 
    float: none; 
    margin:auto; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    position: fixed; 
    max-height:350px; 
}

Link for reference

Hope this ...

Quelle

2017-06-17 16:01:33

Und ein Flexbox es tut auch hilft:

.container { 
    display: flex; 
    align-items: center; 
}

Quelle

2017-06-17 16:14:01 Gerard

You can benefit of the display table and table-cell box model algorithm 

html,body { 
height : 100%; 
} 

.table { 
    display: table; 
    height: 100%; 
    margin: 0; 
} 

.table__cell { 
    display: table-cell; 
    vertical-align: middle; 
} 


    <div class="table"> 
     <div class="table__cell"> 
     your markup 
     </div> 
    </div> 


[Result][1] 
    [1]: https://i.stack.imgur.com/QKJKK.png

Quelle

2017-06-17 17:20:37

Wie kann man div in Bootstrap vertikal ausrichten?

Antwort

Verwandte Themen