2014-03-07 197 views
0

我使用的是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/

+0

我認爲你有一個錯字'.Center-Container.is-Table'應該是'.Center容器。就是 - 表# –

+0

在你的情況的問題是,表具有相同的高度和寬度作爲表格單元格,因爲它應該相當於標題的高度和寬度。檢查我的答案小提琴。 –

回答

0

你的情況的問題是,is-Table具有相同的高度和寬度Table-cell地方,因爲它應該相當於標題的高度和寬度。

FIDDLE

可以刪除的,表格

#home { 
    background:url(http://catexcomp.ro/nevermore/img/bg.jpg) 50% 0 no-repeat fixed; 
    color: white; 
    height: 500px; 
    margin: 0; 
    display:table; 
    width:100%; 
} 
.Table-Cell { 
    display: table-cell; 
    vertical-align: middle; 
} 
.Center-Block { 
    width: 50%; 
    margin: 0 auto; 
    z-index:999999; 
} 
0

試試這個:

#home { 
    background:url(http://catexcomp.ro/nevermore/img/bg.jpg) 50% 0 no-repeat fixed; 
    color: white; 
    height: 500px; 
    margin: 0; 
    } 

.Center-Container.is-Table { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 

.is-Table .Table-Cell { 
    display: table-cell; 
    vertical-align: middle; 
} 
.is-Table .Center-Block { 
    width: 50%; 
    text-align: center; 
    top: 50%; 
    margin: 0 auto; 
    z-index:999999; 
} 

FIDDLE

+0

我想你有一個錯字'.Center-Container.is-Table' –

+0

不可以。看看OP的HTML ..這不是針對CSS選擇器的最佳方式,但這是一個完全不同的主題。 – Sebsemillia