我正在使用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;
}
但它不是纵向和横向居中,我不明白为什么。谁能解释一下我做错了什么? 这是一个fidlle:http://jsfiddle.net/WY37a/
答案 0 :(得分: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;
}
答案 1 :(得分:0)
在您的情况下,问题是is-Table
的高度和宽度与Table-cell
相同,因为它应该等同于标题的高度和宽度。
<强> FIDDLE 强>
您可以删除is-Table div
#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;
}