부트 스트랩을 사용하여 DIV 컨테이너로 그리드 가운데 놓기

-1

Android 및 iphone 용 HTML5 웹 앱을 만들고 있습니다.부트 스트랩을 사용하여 DIV 컨테이너로 그리드 가운데 놓기

간단하게하기 위해 '마스터'페이지와 '로그인'페이지가 있습니다.

<div class="container-fluid pagination-centered" style="width: 100%; height: 100%; margin: auto; background-color: yellow;"> 
    <div class="navbar navbar-inverse navbar-fixed-top" id="Header" style="min-height: 37px;"> 
     <div class="col-xs-12"> 
      <!--Header stuff goes here--> 
     </div> 
    </div> 
    <div class="row" id="Contents" style="height: 100%;"> 
     <div class="col-xs-12" style="vertical-align: middle;"> 
      <div id="PIN" style="display: none;height: auto;"> 
      </div> 
      <div id="Manager" style="display: none;height: auto;"> 
      </div> 
      <div id="LogIn" style="background-color: white;height: auto;"> 
      </div> 
      <div id="Live" style="display: none;height: auto;"> 
      </div> 
     </div> 
    </div> 
    <div class="navbar navbar-inverse my-footer navbar-fixed-bottom" style="height: 22px; background-color: black;"> 
     <div class="container-fluid" style="height: 22px"> 
      <div id="rowFooter" style="width: 100%"> 
       <!--footer stuff goes here--> 
      </div> 
     </div> 
    </div> 
</div>

내 LogIn.html 페이지의 마크 업이있다 : I는 컨테이너 DIV의 중간에 페이지를 중심하려는

<html> 
<body> 

    <div class="row"> 
     <div id="lblSubHeader" class="col-xs-12" style="color: white;padding-left:5px; float: left; font-size:large;text-align:left; 
font-weight: 600; width: 100%; overflow: hidden">Register</div> 
    </div> 
    <div class="row" id="row1" style="margin-top:15px;"> 
     <div class="col-xs-12 navbar-text text-left" style="color: #999999;margin-bottom:3px; font-weight: bold; 
      margin-left: 5px; width: 100%; font-size: smaller;"> 
      Email address 
     </div> 
    </div> 
    <div class="row" id="Div1"> 
     <div class="col-xs-12"> 
      <input id="txtUsername" type="text" class="form-control input-md" style="width: 100%;margin-bottom:3px; " /> 
     </div> 
    </div> 
    <div class="row" id="Div2"> 
     <div class="col-xs-12 navbar-text text-left" style="color: #999999;margin-bottom:3px; margin-top:3px; font-weight: bold; 
      margin-left: 5px; width: 100%; font-size: smaller;"> 
      Password 
     </div> 
    </div> 
    <div class="row" id="Div3"> 
     <div class="col-xs-12"> 
      <input id="txtPassword" type="password" class="form-control input-md" style="width: 100%" /> 
     </div> 
    </div> 
    <div class="row" id="Div4"> 
     <div style="left: 0px; float: right;padding-top:45px;" class="col-xs-12"> 
      <a href="#" id="btnOKLogIn" class="button"><img src="../Common/Images/Buttons/GO.png" /></a> 
     </div> 
    </div> 
</body> 
</html> 
<script type="text/javascript" src="../Mobile/Scripts/LogIn.js"> 
</script>

이

내 마크 업입니다.

div 위의 마크 업과 함께 '페이지'는 항상 페이지의 위쪽으로 세로로 위쪽에 있습니다.

Google에서 발견 된 몇 가지 예를 살펴 보았지만 아무 것도 작동하지 않는 것 같습니다. 내가 사용한 가장 최근의 것은 위의 것입니다.

출처

2014-12-15 Andrew Simpson

@downvoter 이유를 설명해주세요. 감사합니다 –

나는 아래쪽 투표가 개인적인 것이라고 생각해야합니다. 코드/마크 업이 있으며 원하는대로 작동시키려는 시도가 있습니다. –

정확하게 이해한다면 콘텐츠를 세로로 가운데에 배치하고 싶을 것입니다. 여기에 모의은 당신의 방법에 당신을 도울 수있는 일이야 :

http://jsfiddle.net/srs1em1s/

및 관련 코드 :

HTML :

<div class="page">This should be vertically centered on your screen</div>

CSS :

.page { 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
    display:table; 
}

쪽으로 날짜가있는 피들 : http://jsfiddle.net/qe9gvukq/2/

출처

2014-12-15 12:50:50 Patrick

안녕하세요, 게시 해 주셔서 감사합니다. 나는 지금 그것을 조사 할 것이다. 감사합니다 :) –

나는 또한 당신을 도울 수있는 비슷한 질문을 발견 : http://stackoverflow.com/questions/59309/how-to-vertically-center-content-with-variable-height-within-a- div – Patrick

안녕하세요, 저는 두렵습니다. 부트 스트랩/트위터를 사용하고 있으며 스타일 설정을 덮어 쓸 수도 있습니다. 시간을 내 주셔서 감사합니다. 감사합니다. –

부트 스트랩을 사용하여 DIV 컨테이너로 그리드 가운데 놓기

답변

관련 문제