부트 스트랩 : 컨테이너 유체를 수직으로 센터링합니다.

컨테이너 컨테이너 (몸체 태그)에 컨테이너 유체를 센터링하려고합니다. 내 웹 페이지의 예는 다음과 같습니다. 부트 스트랩 : 컨테이너 유체를 수직으로 센터링합니다.

해당 컨테이너는 검정색으로 더 잘 식별 할 수있는 컨테이너입니다. 다른 두 div의가 있습니다

- The top one which is a (nav class="navbar navbar-inverse navbar-fixed-top") 
- The bottom one which is a (nav class="navbar navbar-inverse navbar-fixed-bottom")

질문은 : 어떻게 내가 항상 내 페이지의 중간에 수 (검은 색) 내 컨테이너 유체의 중심을 할 수 있습니까? 이 콘테이너의 내용은 동적으로 변화 할 것이고 나는 중간 (항상 동일한 위 및 아래 동일한 간격)에 체재하기 위하여 기울인다

고마워.

편집 : 요청에 따라, HTML 및 CSS :

HTML :

<body ng-controller="LanguageController as language"> 

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
<div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#language" aria-expanded="false" aria-controls="language"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#"> {{ language.lblAppName }}</a> 
    </div> 
    <div class="navbar-collapse collapse" id="language"> 
    <div class="container vertical-center"> 
     <label> {{ language.lblSelectLanguage }} </label> 
     <select ng-options="item for item in language.languages" ng-model="language.selectedLanguage" ng-change="language.changeLanguage()"></select> 
     <button ng-click="language.editLanguage()">{{ language.lblEditLanguage }}</button> 
    </div> 
    </div> 
    </div> 
</nav> 


<div id="corpus" class="container-fluid" ng-view=""> 
</div> 


<nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation"> 
<div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#route" aria-expanded="false" aria-controls="route"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <div class="navbar-brand"> {{ language.lblFooter }} </div> 
    </div> 
    <div id="route" class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#"> {{ language.lblMainPage }} </a></li> 
     <li><a href="#">{{ language.lblFirstPage }}</a></li> 
     <li><a href="#">{{ language.lblSecondPage }}</a></li> 
     <li><a href="#">{{ language.lblThirdPage }}</a></li> 
    </ul> 
    </div> 
    </div> 
</nav>

CSS :

body { 
padding-top: 70px; 
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static- top. Change if height of navigation changes. */ 
} 

.container { 
display: table; 
} 

.vertical-center { 
display: table-cell; 
padding-top: 1%; 
padding-left: 5%; 
} 

.vertical-center label.ng-binding{ 
color:grey; 
} 


div#corpus.container-fluid.ng-scope { 
background-color:default; 
} 

div#mainDiv a.ng-binding { 
color: black; 
text-decoration: underline; 
} 

.top-buffer { 
margin-top:2%; 
}

출처

2016-09-19 Sherokan

당신은 거기 밖으로이 작업을 수행 할 수있는 각도 지침을 찾을 수 있습니다 –

요소에 대한 HTML과 CSS를 제공합니다. 내용이 보이는 화면보다 커질 수 있습니까? 그렇다면 레이아웃 변경에 대해 생각해보십시오. – spongessuck

@ Dejan.S 완료, 감사합니다. – Sherokan

기본적으로,이 질문은 answered before하고있다.

.vertical-center { 
    min-height: 100%; 
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
} 

<div class="container-fluid vertical-center"> 
    Vertically centered in body..... 
</div>

http://www.bootply.com/oX2f8eBxFv

출처

2016-09-19 14:12:17 ZimSystem

고마워요! 이전에이 링크를 보았지만 전에는 제대로 작동하지 않았습니다. 저에게 이상한 레이아웃을 주었고 제가 찾던 것이 아니라고 생각했습니다. 내가 모든 것을 엉망으로 만든 커스텀 클래스를 가지고 다른 div와 충돌을 일으킨다는 것을 알게된다. – Sherokan

감사합니다. BS3와 함께 charme처럼 작동합니다. –

부트 스트랩 : 컨테이너 유체를 수직으로 센터링합니다.

답변

관련 문제