我使用的是Bootstrap框架,我有這樣的標記:垂直和水平居中不工作
<header id="home" data-scroll-index="0">
<div class="Center-Container is-Table">
<div class="Table-Cell">
<div class="Center-Block">
<h1>DUMMY TEXT</h1>
</div>
</div>
</div>
</header>
這個CSS樣式:
#home {
background:url(../img/bg.jpg) 50% 0 no-repeat fixed;
color: white;
height: 800px;
margin: 0;
}
.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
display: table-cell;
vertical-align: middle;
}
.is-Table .Center-Block {
width: 50%;
margin: 0 auto;
z-index:999999;
}
但它不」 t垂直和水平中心,我不明白爲什麼。有人能解釋我做錯了什麼嗎? 這裏是一個fidlle:http://jsfiddle.net/WY37a/
我認爲你有一個錯字'.Center-Container.is-Table'應該是'.Center容器。就是 - 表# –
在你的情況的問題是,表具有相同的高度和寬度作爲表格單元格,因爲它應該相當於標題的高度和寬度。檢查我的答案小提琴。 –