부트 스트랩 4 - 가로 및 세로 정렬

Question

다음 내용을 가로 및 세로로 정렬 할 수 없습니다.

누군가가이 문제에 대한 최선의 방법을 말해 줄 수 있습니까?

<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> 

는 동일하게 사용할 수 있도록

Answer 1

Bootstrap4 이제 CSS를 인 flexbox를 사용하여 감사합니다. Flexbox는 기본적으로 수직 및 수평 정렬을 지원합니다.

기본적으로 인 flexbox 용기 행 (기본값) 또는 열 로 flex-direction을 가질 수있다. 전자에서는 가로 맞춤을 위해 align-items 속성을 사용하여 자식을 세로로 정렬하고 justify-content 속성을 사용할 수 있습니다. 후자의 경우 가로 정렬에는 align-items이 사용되고 세로 정렬에는 justify-content이 사용됩니다.

현재 인 flexbox에 대한 자세한 내용을보실 수 있습니다 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

이

<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> 

내가 COL-MD-4를 제거하고 d-flex justify-content-center align-content-center로 교체하십시오. 이것은 flexbox를위한 부트 스트랩 4 베타 유틸리티입니다. 당신은 또한 할 수 있지만 인라인 스타일 http://getbootstrap.com/docs/4.0/utilities/flex/