어떻게 수직으로 부트 스트랩 레이아웃

-5

를 사용하는 동안 사업부를 정렬 중심 내가 다음 코드가하는 : 나는 부트 스트랩의 그리드 시스템을 사용하고어떻게 수직으로 부트 스트랩 레이아웃

#content{ 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}

<body> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-lg-12"> 
 
       <div id="content"> 
 
        <h1>Sample Text</h1> 
 
        <h3>Subtext to the intro to the site</h3> 
 
        <hr> 
 
        <button class="btn btn-default btn-lg">Get Started!</button> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>

합니다. div의 내용을 세로로 가운데에 맞출 수있게하려면 id="content" (기본적으로 페이지의 크기가 조정되는 경우에도 전체 콘텐츠가 가로 및 세로 가운데에 배치되기를 원합니다). 이것은 이미지를 배경으로 한 스플래시 페이지를 의미합니다. CSS를 사용하여 어떻게 할 수 있습니까? vertical-align: middle이 작동하지 않습니다.

그냥 내 학습을 위해 text-align: center은 기본적으로 이름이 텍스트임을 나타낼지라도 모든 요소를 가운데에 배치합니까?

출처

2017-12-18 mo_maat

부트 스트랩 4를 사용하고 있습니까? [부트 스트랩의 플렉스 구현] (https://getbootstrap.com/docs/4.0/utilities/flex/#align-items) –

https://stackoverflow.com/a/17521229/4229270 – Sinto

https : // stackoverflow를 확인하십시오. .com/a/13075912/4229270 – Sinto

.container .row div 
{ 
    display: table; 
    margin: 0 auto; 
} 

#content 
{ 
    height: 100%; 
    display: table-cell; 
    vertical-align: middle;  
}

출처

2017-12-18 08:13:07

질문에 대답 할 수도 있지만, 몇 가지 추가 정보를 제공하고 대답을 설명하지 않을 수도 있습니다. 현재 상태에서이 답변은 저품질입니다. –

어떻게 수직으로 부트 스트랩 레이아웃

답변

관련 문제