Bootstrap:垂直居中容器流体
问题描述:
我正在尝试将容器流体置于其父容器(正文标记)中。 这是我的网页的一个例子:Bootstrap:垂直居中容器流体
有问题的容器是我用黑色着色以识别更好的那个。 还有其他两个div:
- The top one which is a (nav class="navbar navbar-inverse navbar-fixed-top")
- The bottom one which is a (nav class="navbar navbar-inverse navbar-fixed-bottom")
的问题是:我怎么能中心我容器流体(黑色)总是在我的页面的中间?这个容器的内容会动态变化,我不能一直保持在中间(相同的边缘顶部和底部)
谢谢你们。
编辑:根据要求,HTML和CSS:
HTML:
<body ng-controller="LanguageController as language">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#language" aria-expanded="false" aria-controls="language">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> {{ language.lblAppName }}</a>
</div>
<div class="navbar-collapse collapse" id="language">
<div class="container vertical-center">
<label> {{ language.lblSelectLanguage }} </label>
<select ng-options="item for item in language.languages" ng-model="language.selectedLanguage" ng-change="language.changeLanguage()"></select>
<button ng-click="language.editLanguage()">{{ language.lblEditLanguage }}</button>
</div>
</div>
</div>
</nav>
<div id="corpus" class="container-fluid" ng-view="">
</div>
<nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#route" aria-expanded="false" aria-controls="route">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand"> {{ language.lblFooter }} </div>
</div>
<div id="route" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"> {{ language.lblMainPage }} </a></li>
<li><a href="#">{{ language.lblFirstPage }}</a></li>
<li><a href="#">{{ language.lblSecondPage }}</a></li>
<li><a href="#">{{ language.lblThirdPage }}</a></li>
</ul>
</div>
</div>
</nav>
CSS:
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static- top. Change if height of navigation changes. */
}
.container {
display: table;
}
.vertical-center {
display: table-cell;
padding-top: 1%;
padding-left: 5%;
}
.vertical-center label.ng-binding{
color:grey;
}
div#corpus.container-fluid.ng-scope {
background-color:default;
}
div#mainDiv a.ng-binding {
color: black;
text-decoration: underline;
}
.top-buffer {
margin-top:2%;
}
答
基本上,这个问题一直answered before。
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
<div class="container-fluid vertical-center">
Vertically centered in body.....
</div>
+0
谢谢!我之前看到过这个链接,但之前对我来说不起作用。这给了我奇怪的布局,我认为那不是我正在寻找。原来我与另一个div有冲突,这个自定义类把所有的东西搞砸了。 – Sherokan
+0
谢谢。像BS3一样迷人 –
提供HTML和CSS为 –
您可能会发现一个角指令,在那里,可以做到这一点的元素。内容是否会比可见屏幕大?如果是这样,请在发生这种情况时考虑更改布局。 – spongessuck
@ Dejan.S完成,谢谢 – Sherokan