如何在引導中垂直對齊容器我正在尋找一種垂直中心對齊的方法container內部的divjumbotron并將其設置在頁面的中間。這個.jumbotron必須適應整個屏幕的高度和寬度，所以我使用了這個CSS。.jumbotron{
heght:100%;
width:100%;}這個.containerdiv的寬度為1025px并且應該在頁面的中間(垂直中心)。.container{
width:1025px;}.jumbotron .container {
max-width: 100%;}我的HTML就像<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>
</ul>
</div>
</div>
</div>
</div>因此，我希望這個頁面能夠適應屏幕的高度和寬度，以及容器垂直中心到巨無霸。我怎樣才能做到呢？
3 回答
德瑪西亞99
TA貢獻1770條經驗 獲得超3個贊
柔性箱方式
垂直對準
注：.jumbotronvertical-center
<div class="jumbotron vertical-center"> <!-- ^--- Added class --> <div class="container"> ... </div></div>
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;}重要
A 百分比
值.的值 height或 min-height屬性相對于 height因此，應該指定 height顯式的父母。 供應商前綴/舊的Flexbox語法由于簡潔而在已發布的代碼段中省略，但在線示例中存在。 在一些舊的web瀏覽器中，比如Firefox 9 (其中我測試過) 撓性容器- .vertical-center在這種情況下-將不會占用父級內部可用的空間，因此我們需要指定 width財產，如： width: 100%.另外，在上面提到的一些web瀏覽器中，FLEX項目- .container在這種情況下-可能不會出現在中心水平。似乎申請的左/右 margin的 auto對彈性物品沒有任何影響。 因此，我們需要通過 box-pack / justify-content.
舊式web瀏覽器的傳統方式
vertical-align: middle
中間
將方框的垂直中點與父框的基線加上父框x高度的一半對齊。
.vertical-centerheightheight.container
聚在一起
.vertical-center::before::afterdisplay.containerinline-block.
vertical-align: middle;
<div class="jumbotron vertical-center"> <div class="container"> ... </div></div>
.vertical-center {
height:100%;
width:100%;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */}.vertical-center:before {
/* create a full-height inline block pseudo=element */
content: " ";
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;}.vertical-center > .container {
max-width: 100%;
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
/* reset the font property */
font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;}auto0displaynone
@media (max-width: 768px) {
.vertical-center:before {
height: auto;
/* Or */
display: none;
}}footer/headerrelative, absolutez-index
慕容708150
TA貢獻1831條經驗 獲得超4個贊
添加Bootstrap.css，然后將其添加到CSS中
html, body{height:100%; margin:0;padding:0}
.container-fluid{
height:100%;
display:table;
width: 100%;
padding: 0;
}
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
.centering {
float:none;
margin:0 auto;
}
Now call in your page
<div class="container-fluid">
<div class="row-fluid">
<div class="centering text-center">
Am in the Center Now :-)
</div>
</div>
</div>
- 3 回答
- 0 關注
- 627 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消