垂直和水平居中不工作

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

来源

2014-03-07 agis

我认为你有一个错字'.Center-Container.is-Table'应该是'.Center容器。就是 - 表＃ –

在你的情况的问题是，表具有相同的高度和宽度作为表格单元格，因为它应该相当于标题的高度和宽度。检查我的答案小提琴。 –

你的情况的问题是，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; 
}

来源

2014-03-07 16:59:50

试试这个：

#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

来源

2014-03-07 16:59:46 Sebsemillia

我想你有一个错字'.Center-Container.is-Table' –

不可以。看看OP的HTML ..这不是针对CSS选择器的最佳方式，但这是一个完全不同的主题。 – Sebsemillia

垂直和水平居中不工作

回答

相关问题