container
div 를 세로로 jumbotron
가운데에 배치하고 페이지 중간에 div 를 설정 하는 방법을 찾고 있습니다.
은 .jumbotron
화면의 전체 높이와 폭에 적응되어야한다. .container
DIV은의 폭을 갖는 1025px
상기 페이지 (수직 중심)의 중앙이어야한다.
이 페이지에서 점보트론이 수직으로 중앙에있는 컨테이너와 함께 화면의 높이와 너비에 맞춰 점보트론을 갖기를 원합니다. 어떻게하면 되나요?
.jumbotron {
height:100%;
width:100%;
}
.container {
width:1025px;
}
.jumbotron .container {
max-width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container text-center">
<h1>The easiest and powerful way</h1>
<div class="row">
<div class="col-md-7">
<div class="top-bg"></div>
</div>
<div class="col-md-5 iPhone-features" style="margin-left:-25px;">
<ul class="top-features">
<li>
<span><i class="fa fa-random simple_bg top-features-bg"></i></span>
<p><strong>Redirect</strong><br>Visitors where they converts more.</p>
</li>
<li>
<span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
<p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
</li>
<li>
<span><i class="fa fa-check simple_bg top-features-bg"></i></span>
<p><strong>Check</strong><br>Constantly the status of your links.</p>
</li>
<li>
<span><i class="fa fa-users simple_bg top-features-bg"></i></span>
<p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
</li>
<a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
<h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
</ul>
</div>
</div>
</div>
</div>