Bootstrap 4 - Horizontal und vertikal ausrichten

Question

Ich kann den folgenden Inhalt nicht horizontal und vertikal ausrichten.

Kann mir jemand den besten Ansatz dafür nennen?

<div class="container"> 

    <div class="row"> 

    <div class="col-md-4"> 
     <img width="300" src="../assets/medlogo.png"> 

     <h1 class="text-center login-title">Acessar o programa</h1> 
     <div class="account-wall"> 
     <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120" 
      alt=""> 
     <form class="form-signin"> 
      <input type="text" class="form-control" placeholder="Email" required autofocus> 
      <input type="password" class="form-control" placeholder="Password" required> 
      <button class="btn btn-lg btn-primary btn-block" type="submit"> 
        Sign in</button> 
     </form> 
     </div> 

    </div> 
    </div> 
</div> 

Danke

Answer 1

Bootstrap4 jetzt mit CSS Flexbox, so dass Sie das gleiche verwenden können. Die Flexbox verfügt über eine vertikale und horizontale Ausrichtungsunterstützung.

Grundsätzlich kann ein FlexBox Behälter haben flex-direction als Zeile (Standardwert) oder Spalte. Mit der ehemaligen, Eigenschaft align-items kann verwendet werden, um seine Kinder und justify-content für die horizontale Ausrichtung vertikal auszurichten. Während bei letzterer align-items für horizontale Ausrichtung und justify-content für vertikale Ausrichtung verwendet wird.

Sie können hier mehr über Flexbox lesen: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

Try this

<div class=" d-flex justify-content-center align-content-center"> 
     <img width="300" src="../assets/medlogo.png"> 

     <h1 class="text-center login-title">Acessar o programa</h1> 
     <div class="account-wall"> 
     <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120" 
      alt=""> 
     <form class="form-signin"> 
      <input type="text" class="form-control" placeholder="Email" required autofocus> 
      <input type="password" class="form-control" placeholder="Password" required> 
      <button class="btn btn-lg btn-primary btn-block" type="submit"> 
        Sign in</button> 
     </form> 
     </div> 

    </div> 

ich die col-md-4 entfernt und ersetzt es mit d-flex justify-content-center align-content-center. Dies ist Bootstrap 4 Beta-Dienstprogramme für Flexbox. Obwohl können Sie auch in-line tun Stil

Mehr Infos http://getbootstrap.com/docs/4.0/utilities/flex/