我正在尝试在视口中垂直居中Bootstrap容器。我的代码可以在
看到http://www.bootply.com/C8vhHTifcE
我试图将此作为中心的尝试都失败了。有没有人有解决方案?
澄清一下:我希望容器在视口中垂直居中,我希望能够将行空间化,以便填充空间。
HTML
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="row text-center">
<div class="col-md-offset-2 col-md-8">
A HEADING
</div>
</div>
<div class="row text-center">
<div class="col-md-offset-2 col-md-8">
AN ITEM
</div>
</div>
<div class="row text-center">
<div class="col-md-offset-2 col-md-8">
ANOTHER ITEM
</div>
</div>
<div class="row text-center">
<div class="col-md-offset-2 col-md-8">
<input value="A BUTTON" style="width:100px;" type="button">
</div>
</div>
<!-- /.row -->
</div>
答案 0 :(得分:1)
<强> CSS:强>
body {
padding-top: 50px
}
body,
html {
height: 100%
}
.display-table {
display: table;
height: 100%;
width:100%;
max-width:1170px;
margin:0 auto;
}
.display-table-cell {
display: table-cell;
width: 100%;
vertical-align: middle;
}
.display-table-cell > div {
display: table;
width: 100%;
height: 25%;
}
.display-table-cell > div > span {
display: table-cell;
width:100%;
vertical-align: middle;
}
.display-table-cell > div:nth-child(even) {
background: #f7f7f7
}
.display-table-cell > div:nth-child(odd) {
background: #eee
}
<强> HTML 强>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container display-table text-center">
<div class="display-table-cell">
<div><span>A HEADING</span></div>
<div><span>AN ITEM</span></div>
<div><span>ANOTHER ITEM </span></div>
<div><span><input value="A BUTTON" class="btn btn-default" type="button"><span></span></span></div>
</div>
</div>