[英]vertically center div in page with sticky footer
我正在尝试在IE11中垂直对齐div。 我试图在这里使用@billbad的答案
我的示例与互联网上的许多其他示例之间的区别在于,它们没有使用粘性页脚,而我认为是导致我出错的原因。
的HTML
<div class="wrapper">
<div class="art-header"></div>
<div class="outer-container">
<div class="middle-container text-center">
<div class="contner">
<button type="button" class="btn btn-primary text-center" (click)="addLine()">Primary</button>
<ul>
<li *ngFor="let line of name" >
{{ line }}
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="rmpm-footer">
<p>Footer</p>
</div>
</div>
CSS的一部分
.contner {
min-height: 242px;
max-height: 100%;
width: 604px;
padding-top:10px;
background-color: #FFFFFF;
box-shadow: 0 1px 1px 1px rgba(0,0,0,0.1);
padding-bottom: 12px;
transition: max-height .4s;
-webkit-transition: .4s;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
.middle-container {
display: table-cell;
vertical-align: middle;
}
.outer-container {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
实际上,div不能很好地居中,并且页脚高度已调整大小。 那不是我要找的东西。
预期的行为是,当我添加div仍居中的行时,当div大于初始页面高度时,页脚就会下降。
我创建了一个stackblitz示例,您可以在那里直接检查我的代码。
尝试使用margin-top
代替display: table-cell
.middle-container {
margin-top: 40%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.